CSS Attribute Selectors - Select Element based on its Attribute

Sometime we need to select an HTML element based on its attribute. Therefore, CSS provides another way to select an element, that is, the attribute selector.

CSS Select Element with Specified Attribute

To select element with specified attribute in CSS, here is the syntax:

element[attribute] {property: value}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a[target] {background-color: blueviolet; color: white;}
   </style>
</head>
<body>

   <p>List of famous web developing languages:</p>
   <ul>
      <li><a href="https://jobails.com/html/index.html" target="_blank">HTML</a></li>
      <li><a href="https://jobails.com/css/index.html">CSS</a></li>
      <li><a href="https://jobails.com/js/index.html" target="_blank">JavaScript</a></li>
   </ul>

</body>
</html>

Output

List of famous web developing languages:

CSS Select Element with Specified Attribute and its Value

To select and style an element with specific attribute and value, here is the syntax:

element[attribute=value] {property: value}

The value should be enclosed within quotes. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      a[target="_blank"] {background-color: tomato; color: white;}
   </style>
</head>
<body>

   <p>List of some unknown links:</p>
   <ul>
      <li><a href="#" target="_blank">one</a></li>
      <li><a href="#" target="_self">two</a></li>
      <li><a href="#" target="_parent">three</a></li>
      <li><a href="#" target="_blank">four</a></li>
      <li><a href="#" target="_top">five</a></li>
   </ul>

</body>
</html>

Output

List of some unknown links:

CSS Select Element with Attribute containing Specified Word

To select an element with attribute containing specified word in CSS, use following syntax:

[attribute ~= word] {property: value}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      [title~="list"] {color: tomato; font-weight: bold;}
   </style>
</head>
<body>

   <p>Here are some random texts in the form of list:</p>
   <ul>
      <li title="list one">list number one.</li>
      <li title="two">two.</li>
      <li title="list">list three.</li>
   </ul>

</body>
</html>

Output

Here are some random texts in the form of list:

list number one.
two.
list three.

CSS Select Element based on Attribute starting with Specified Value

To select an element with specified attribute, where the attribute starts with specified value in CSS, follow the following syntax:

[attribute |= value] {property: value}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      [class|="cc"] {color: yellowgreen; font-weight: bold;}
   </style>
</head>
<body>

   <p class="cc-One">Lorem ipsum, dolor sit amet consectetur.</p>
   <p class="cc">Lorem ipsum dolor sit amet.</p>
   <p class="cc one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, repellat.</p>
   <p class="ccOne">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
   <p class="one cc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

</body>
</html>

Output

Lorem ipsum, dolor sit amet consectetur.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, repellat.

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Did You Notice ? To be selected, the value need to be either the word alone, or the word followed by a hyphen (-)

Therefore, to solve this problem, or if I say, to select and apply some style to an element with specified attribute starting with specified value, without caring the hyphen only. Follow the following syntax:

[attribute ^= value] {property: value}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      [class^="cc"] {color: purple; font-weight: bold;}
   </style>
</head>
<body>

   <p class="cc-One">Lorem ipsum, dolor sit amet consectetur.</p>
   <p class="cc">Lorem ipsum dolor sit amet.</p>
   <p class="cc one">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, repellat.</p>
   <p class="ccOne">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
   <p class="one cc">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

</body>
</html>

Output

Lorem ipsum, dolor sit amet consectetur.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, repellat.

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

CSS Select Element based on Attribute ending with Specified Value

To select an element with an attribute ending with specified value in CSS, use following syntax:

[attribute $= value] {property: value}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      [class $= "cc"] {color: coral; font-weight: bold;}
   </style>
</head>
<body>

   <p class="One-cc">Lorem ipsum, dolor sit amet consectetur.</p>
   <p class="Onecc">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
   <p class="cc one">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   <p class="cc">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
   <p class="one cc">Lorem ipsum dolor sit amet consectetur adipis.</p>

</body>
</html>

Output

Lorem ipsum, dolor sit amet consectetur.

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing.

Lorem ipsum dolor sit amet consectetur adipis.

CSS Select Element based on Attribute containing Specified Value

To select an element with an attribute that contains specified value, without mattering the position of the value in the attribute's value in CSS, follow the syntax given below:

[attribute *= value] {property: value}

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      [class *= "cc"] {color: crimson; font-style: italic;}
   </style>
</head>
<body>

   <p class="One-cc">Lorem ipsum, dolor sit amet consectetur.</p>
   <p class="Onecc">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
   <p class="cc one">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
   <p class="myclass">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,</p>
   <p class="cc">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
   <p class="one cc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero.</p>

</body>
</html>

Output

Lorem ipsum, dolor sit amet consectetur.

Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore,

Lorem ipsum dolor sit amet consectetur adipisicing.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero.

List of Other selectors in CSS:

CSS Online Test

« Previous Tutorial Next Tutorial »