Can CSS find an element that has ANY id? - html

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.

Answer 3

You can try using css attribute selector:
div.item {
color: black;
}
div.item[id^='brand_'] {
color: red;
}
div.code {
text-transform: uppercase;
}
div.code[id^='brand_'] {
color: blue;
}
<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>
<div class="code">This text should be in caps</div>
<div class="code" id="brand_three">This text should be in caps and blue color</div>
Here, [id^='brand_'] refers to id starting with brand_. There are also $(ends with) and *(contains) expressions.

Answer 4

We can use
.item[id^="brand"]{
color:red;
}
^= indicates "starts with". So we can search id which starts with "brand".

Answer 5

CSS [attribute^=value] Selector
The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.
So in your case ;
<style>
[id^="brand"] {
color:red;
}
<style>
Refer to:
w3schools
Try it yourself

Answer 6

Here's another way to do it.
<style type="text/css">
.item:not([id='']) {
color:red;
}
</style>
But it assumes you can set id='':
<div class="item" id="">This text should be black</div>
Not sure how this would work when id is unspecified as in your case.