Styling for generated elements

Ph3n0m

Hi all


I am using an automated system that generates html, aswell as id codes for certain elements, i.e. buttons in forms


The problem is that whilst styling I have encountered what I consider an annoyance

Example:

5 buttons

each called

id_this_button_does_something_0
id_this_button_does_something_1
id_this_button_does_something_2
id_this_button_does_something_3
id_this_button_does_something_4

Now is there any shortcut in stylesheets that will allow me to style all these buttons, without having to write out their full id


Just wondering is the following possible (havent tried it in work, as I am heading home at the moment, and dont have access to the files to try my idea)

#id_this_button_does_something* {style goes here}

seamus

Forgive my lack of CSS skillz, but can you not create subclasses incorporating elements.

So for example, in the CSS you have a class called CustomForm, and within the CustomForm class, you define how HTML elements are styled.

SO you have

#CustomForm.Button { .... }

and in the HTML, you have
<div class="CustomForm">

<input type="......

.....

</div>

As I say, I'm not overly familiar with it all, so even though my code is wrong, I hope I've gotten the idea across.

maxheadroom

If you had html code like:

<div id="customform">
  ...
  <input type="button" id="generatedID1"> ...
  <input type="button" id="generatedID2"> ...
  <input type="button" id="generatedID3"> ...
  ..
</div>

you could use CSS like this:

div#customform input {
  my styles;
}

which would then apply to all input elements surrounded by the DIV with the ID "customform"

colm_c

No need for any complicated CSS here...

just add the following to the boxes

<input type="button" id="generated_id_0" class="button-style1" >

And just style the class .button-style1

On that note, it's worth mentioning that some netscape browsers don't support underscores in names in CSS

maxheadroom

colm_c wrote:

No need for any complicated CSS here...

just add the following to the boxes

<input type="button" id="generated_id_0" class="button-style1" >

And just style the class .button-style1

On that note, it's worth mentioning that some netscape browsers don't support underscores in names in CSS

That would work too - but if you're going to use class names try to make them descriptive, instead of just calling it "inputclass1". Its in the w3 guideines for a reason:)

I happen to think my way is more elegant though - after all, the C stands for Cascading - so let them cascade