Clever Geek Handbook

Can CSS find an element with ANY ID?

I have a lot of the same elements on a page that is not under my direct control (so I cannot change the HTML). It 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 items with an item class with an id.

I can do

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

But id goes to hundreds, so not an option.

What I'm looking for is a rule like this:

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

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

+3


source to share


6 answers


Yes, this is possible with CSS attribute selectors :



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


source


Yes, it does exist. In this case, you should use:

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

This selects everything div

with an ID that contains brand

and colors it red.

Edit: you can also make sure it only targets id

at brand_

the beginning of id

-name, use the following:

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


This will avoid that others div

in the future who have id

that contain brand

will also be targeted.

Edit 2: To make it even more specific, you can only target the id

following class="item"

:

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

It points to everything div

with brand_

at the beginning id

and has item

how class

.

+5


source


You can try using the 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>
Run codeHide result


Here [id^='brand_']

refers to id

starting with brand_

. There are also expressions $

(ends) and *

(contains).

+1


source


CSS [attribute ^ = value] Selector

The [attribute ^ = value] selector is used to select elements whose attribute value starts with the specified value.

So in your case;

<style>
 [id^="brand"] {
   color:red;
 }
<style>

Talk to:

w3schools

Try it yourself

0


source


We can use

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

^ = indicates that "starts with". Thus, we can search for an identifier that starts with "brand".

0


source


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 it would work if id is not specified as in your case.

-1


source






More articles:


All Articles