All about attribute selectors

Many times we might have faced difficulties in applying CSS using id’s and classes due to its specificity.

Here comes a wondeful feature of applying CSS through attribute selectors which also reduces the usage of additional classes and id’s.

This basically allows you to apply CSS using attribute selectors in html tags which appears this way <tag attribute=”value”></tag>

Some attribute examples like class=”value”, id=”value”, src=”value”, target=”value”, title=”value”, type=”value” and so on…

Below are attribute selectors with examples

1. [attribute]:

This attribute is used to apply CSS by targeting a particular attribute like href, target, type, title, src etc., like shown in the below example

<!DOCTYPE html>
<html>
<head>
<style>
.first a[href] {
  background-color: blue;
  color:#fff !important;
  padding:5px;
  border-radius:5px;
}
.first a[type]{
  background-color: blue;
  color:#fff !important;
  padding:5px;
  border-radius:5px;
  text-decoration:none;
}
.first img[src]{
 border:1px solid red;
 padding:5px;
}
</style>
</head>
<body>
<div class="first">
        <p><a href="https://skslate.com/">skslate.com</a></p>
        <p><a href="https://skslate.com/" type="button">skslate.com</a></p>
        <p><img src="https://skslate.com/wp-content/uploads/2021/04/cropped-sk_slate_logo-1.png" alt ="someImg"></p>
</div>
</body>
</html>

The above approach is just an example. In real time scenarios applying CSS directly by targeting the attributes without its value will impact on the other component . Hence we will look into the below approaches for real-time scenarios, particularly by targeting attribute values.

2. [attribute=”value”]:

This attribute selector helps you to target ALL the attributes with that particular value.

Assume if you want to apply some CSS to ALL the attributes like ‘target=”_blank”, alt=”SK logo” or any other attribute=”value” and it should match with its text case. Then you can go with this approach as shown in the below example.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.second a[target="_blank"] {

  background-color: blue;
  color:#fff !important;
  text-decoration:none;
  padding:5px;
}
.second img[alt ="sk logo"]{
	border:2px solid #000;
}
</style>
</head>
<body>
<div class="second">
	<p><a href="https://skslate.com/" target="_blank">skslate.com</a></p>
	<p><a href="https://skslate.com/" target="_blank">skslate.com</a></p>
	<p><img src="https://skslate.com/wp-content/uploads/2021/04/cropped-sk_slate_logo-1.png" alt ="sk logo"></p>
	<p><img src="https://skslate.com/wp-content/uploads/2021/04/cropped-sk_slate_logo-1.png" alt ="SK logo"></p>
</div>
</body>
</html>

3. [attribute~=”value”]:

This attribute is used to apply CSS to All the elements that Contains a value in that attribute. The “~” symbol in the attribute represents ALL the elements. But it should match with its text case. Check the below example.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.third [placeholder~=Enter] {
  border: 5px solid yellow;
}
</style>
</head>
<body>
<div class="third">
  <div class="form-group">
    <label for="exampleInputName">Name</label>
    <input type="text" placeholder="Enter Name">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <input type="email" placeholder="email Enter">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword">Password</label>
    <input type="password" placeholder="enter Password">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword">Age</label>
    <input type="number" placeholder="Age">
  </div>
</div>
</body>
</html>
Result:

But the above approach works only if the attribute value exactly matches the word along with its text case

4. [attribute|=”value”]:

This atrribute is used to target the starting word of its value. But that starting or first word should be WHOLE WORD, ALONE or followed by HYPHEN SYMBOL (-) and it should match with its text case.

Here the pipe symbol “|” represents that this attribute selects the first word of the attribute value.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fourth [class|=demo] {
  background: yellow;
}
</style>
</head>
<body>
<div class="fourth">
  <p class="demo-header">First word is demo here followed by hypeh(-) symbol</p>
  <p class="demoHeader">Demo is not a separate word here</p>
  <p class="demo btn-primary">Demo word should be alone here</p>
  <p class="demo">Demo word is alone here</p>
  <p class="Demo">Demo word text case not matching here</p>
</div>
</body>
</html>
Result:

First word is demo here followed by hypeh(-) symbol

Demo is not a separate word here

Demo word should be alone here

Demo word is alone here

Demo word text case not matching here

5. [attribute^=”value”]:

In the above example, the attribute selects the FIRST WORD only if it is ALONE and SEPARATE WORD. In the current Attribute(Using ‘^’ symbol) also we target the first word but the value does not have to be a whole word and alone.It should match with its text case

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fifth [class^=demo] {
  background: yellow;
}
</style>
</head>
<body>
<div class="fifth">
  <p class="demo-header">First word is demo here</p>
  <p class="demoHeader">Demo is not a separate word here</p>
  <p class="demo btn-primary">Demo is separate... Still applies</p>
  <p class="demo">Demo word is alone here</p>
  <p class="Demo">Demo word text case not matching here</p>
</div>
</body>
</html>
Result:

First word is demo here

Demo is not a separate word here

Demo is separate… Still applies

Demo word is alone here

Demo word text case not matching here

6. [attribute$=”value”]:

This attribute with dollar($) symbol is used to target the END or LAST word of the attribute value

The value does not have to be a whole word here. But it should match with its text case

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.sixth [class$=demo] {
  background: yellow;
}
</style>
</head>
<body>
<div class="sixth">
  <p class="headerdemo">This worked because Last word is demo here</p>
  <p class="headerDemo">Demo is last word but its case is not matching</p>
  <p class="header-Demo">Demo is last word but its case is not matching</p>
  <p class="btn-primary demo">This worked because Last word is demo here</p>
  <p class="demo">Demo word is alone here</p>
  <p class="Demo">Demo word is alone here but case is not matching</p>
</div>
</body>
</html>
Result:

This worked because Last word is demo here

Demo is last word but its case is not matching

Demo is last word but its case is not matching

This worked because Last word is demo here

Demo word is alone here

Demo word is alone here but case is not matching

7. [attribute*=”value”]:

This attribute with dollar(*) selector used to target some characters inside the attribute value and value does not need to be a whole word and characters has to match with its case

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.seventh [class*="lo"]{
  background: yellow;
}
</style>
</head>
<body>
<div class="seventh">
  <div class="sk-logo">The attribute value has 'lo' characters in it with hypen symbol.</div>
  <div class="sklogo">The attribute value has 'lo' characters in it.</div>
  <div class="skLogo">The attribute value has 'lo' characters in it but its case is not matching with it.</div>
  <div class="skgogo">The attribute value does not have 'lo' characters in it.</div>
</div>
</body>
</html>
Result:
The attribute value does not have ‘lo’ characters in it.

Write a comment