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

ID : 274512

viewed : 41

Tags : htmlcsshtml





Top 5 Answer for html - Can CSS find an element that has ANY id?

vote vote

91

Yes, this is possible using CSS attribute selectors:

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

81

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.

vote vote

75

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.

vote vote

69

We can use

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

^= indicates "starts with". So we can search id which starts with "brand".

vote vote

60

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

Top 3 video Explaining html - Can CSS find an element that has ANY id?







Related QUESTION?