Can CSS find an element that has ANY id?

Question

I have a lot of the same elements on a page that is not under my direct control (so i can't change the HTML). This might look like this:

<div class="item">This text should be black</div>
<div class="item" id="brand_one">This text should be red</div>
<div class="item" id="brand_two">This text should be red</div>
...
<div class="item">This text should be black</div>

I want to write a css rule that targets all elements with class item that have an id.

I can do

#brand_one, #brand_two, ... { color:red; }

But the id's go into the hundreds, so that's not an option.

What i'm looking for is a rule something like this:

.item[id] { color:red; } / .item# { color:red; }

I know this is possible in Javascript, but does this exist in CSS?

Answer 1

Yes, this is possible using CSS attribute selectors:

.item[id] {
    /* any elements with a class .item and an ID attribute */
}

Answer 2

Yes, this exists. In you case you should use:

div[id*="brand"]  { color: red; }

This selects all divs with an id that contains brand and colors it red.

Edit: You can also, to make sure it only targets ids with brand_ in the start of the id-name, use the following:

div[id^="brand_"] { color: red; }

This will avoid that other divs in the future that have an id that contains brand will also be targeted.

Edit 2: To make it even MORE specific, you can target only ids that are following the class="item":

div[id^="brand_"].item { color: red; }

This targets all divs with brand_ in the beginning of the id and have item as a class.