How to select a div by his class number??

Hi

sorry i meant id number
how can i select div´s #intro-text-wp2, #intro-text-wp4, #intro-text-wp5,#intro-text-wp6, etc

something like

#intro-text-wp[???] {

}

Code (markup):

 

I think you have to set class to the elements by javascript and by that class set the style.

Example:

<style>
      .intro-text-wp{
        ...
      }
      </style>

      <div id="intro-text-wp1"></div>
      <div id="intro-text-wp2"></div>
      <div id="intro-text-wp3"></div>
      <div id="intro-text-wp4"></div>
      <div id="intro-text-wp5"></div>

      <script type="text/javascript">
        for(i=0; i<5; i++){
            document.getElementById("intro-text-wp"+i).className = "intro-text-wp";
        }
      </script>

Code (markup):

 

It would be easier (and make a lot more sense) if classes were used instead.

<div class="introtext wp4">

where you can say
all divs with a class of "introtext" get certain styles:

.introtext {
blah blah blah;
}

and then after that, state whatever's specifically different for those with the other class:

.wp4 {
color: #0f0;
}

you can even make it specific-er:


/*all divs with class of introtext*/
div.introtext {
width: 200px;
color: #000; /*black text*/
background-color: #fff; /*white background*/
}

.wp1 {
color: #00f; /*blue on white is good*/
}

.wp2 {
color: #0f0; /*green on white is also still ok*/
}

.wp3 {
color: ##fc0; /*orange on white is still ok*/
}
.introtext.wp4 {
color: #fff; /*white text*/
background-color: #f00; /*red background, but we still keep the 200px width from above*/
}

The last one could even still be done with just .wp4 but who knows how complicated your boxes are getting; for all browsers except IE6, the double-class listing makes it extra super specificker.

IE6 doesn't understand one element listed with more than one class, or with an id and a class:
#foo.manchoo {
styles;
}
for
<div id="foo" class="manchoo"></div>

IE6 will only look at the last one. So be careful of that.

You can also do this:

<div class="infotext" id="wp4">
where everyone with the class of infotext gets certain styles but only one item gets the specific wp# id. This may help get around the IE6 issue.

I was looking at selectors to see if they could be used, but the closest one I could find only looks at the first part of ahyphen-separated id, and was actually originally intended for languages:

<div id="en-US">
foo
</div>

div[id|="en"] {
would match the above;
}

so I don't think that's the direction to look. See instead if you can make those classes, because that opens up easier CSS styling and lets the cascade do more work for you, and classes can be javascript hooks too if you need them.

This way, styles also work for people like me who don't have JS.