Varun Tadimeti's Blog

Advanced attribute selectors.

Varun Tadimeti's photo
Varun Tadimeti
·

2 min read

There are several ways of selecting an element with the help of attributes. Albeit normal selectors can be used, in some cases these advanced selectors can help in getting the job done easily.

To select an element with an attribute, let's look at a code snippet.

<html>
<head>
<style>
 // Element is selected with the help of href attribute
   [href]{
          color:yellow;
         }
</style>
<body>

 <a href="https://www.google.com/">Google it</a>
</body>
</html>

In the above code snippet, the anchor element is selected with the help of its href attribute.

We can also select an element by including its attribute and also the attribute value.

<html>
<head>
<style>
 // Element is selected with the help of its attribute and the attribute value
   [id="heading"]{
                   color: green;
                  }
</style>
<body>
<h1 id="heading"> This is a heading</h1>
</body>
</html>

In the above code snippet, the h1 element is selected with help of its attribute and attribute value. Therefore it will select only the h1 element which has an id of heading.

We can also select an element by conveying that we want to select an element that has a particular attribute whose value starts with a particular character followed by a dash symbol. The below example will provide you a clear picture.

<html>
<head>
<style>

    [id |="he"]{
                   color: green;
                  }
</style>
<body>
<h1 id="he-ading"> This is a heading</h1>
</body>
</html>

In the above code snippet, the green color will apply to an element that has an id that starts with "he" before it encounters a dash(-).

Another advanced attribute selector that can be useful is given below.

<html>
<head>
<style>

    [id *="di"]{
                   color: green;
                  }
</style>
<body>
<h1 id="heading"> This is a heading</h1>
</body>
</html>

In the above code snippet, the h1 element with an id heading appears in green color. Here the selector says that it will select the element which has an id that contains the string "di" .

codingCSSHTML5CSS3