3

I'm creating a template, which will be duplicated for the use. and the css rules I have created are in some cases specific for the template only, because the cms creates a random ID number and adds it in the middle of IDs / classes.

So I was wondering how to select them...

The structure would be like this:

 <div id="row-123456-StaticPart"> content </div>

Whereas here '123456' would be the random generated ID for the page. So if I duplicate the template, on the next page it would be '654321' for example:

 <div id="row-654321-StaticPart"> content </div>

How can I write a rule to select both these ID's? (except for changing the number manually)

I'm thinking of something like:

#row-*-Staticpart {
    color: red;
}

or
div[id|="row-*-Staticpart"] {
    color: red;
}

Thanks for any ideas in advance!

RincewindAssoc
  • 78
  • 1
  • 10

2 Answers2

13

Use CSS 3 selectors :

div[id^="row-"][id$="-StaticPart"]{
    color: red;
}
  • div[id^="row-"] Selects every <div> element whose id attribute value begins with "row-"
  • div[id$="-StaticPart"] Selects every <div> element whose id attribute value ends with "-StaticPart"
Thomas
  • 373
  • 2
  • 9
4

You can use css3 selectors like that:

div[id^="row-"][id$="-Staticpart"] {
    color: red;
}

the ^= indicates what the id should start with, and the $= indicates what it should ends with.

Okba
  • 773
  • 6
  • 11
  • Thanks. Just tested it and it works like a charm. I must have looked only at css selectors, because i didn't see any of these...will check out css3. Thanks also for the additional explanation of what the ^ and $ mean... – RincewindAssoc Dec 22 '16 at 09:41