CSS Selectors - Attribute Selectors in detail

css.Srijan

Introduction

In this article, we are going to discuss CSS Attribute selectors in detail. We are going to design a web page that will contain links to some famous websites. The websites we are considering for this example are :

  • Facebook
  • Linkedin
  • edX
  • Khan Academy

Following are the design requirements for the example page:

  • If the website under consideration is a professional social network, like LinkedIn, it should have a dashed border and for a casual social network like Facebook, it should have a solid border.

  • For a social website, the background color should be blue and the text color should be white.

  • If the link uses https, it should have an orange outline.

  • For all .org domain, text-color should be red.

Below is the final layout :

Example Image

The Skeleton HTML code for the example page is given below:

<h1 id="main-heading" style="text-align:center">Website Links</h1>

<div style="text-align:center">
  <a data-link="social-casual" class="networking" href="https://www.facebook.com">Facebook</a>
  <a data-link="education-open" class="mooc" href="https://www.khanacademy.org">Khan Academy</a>
  <a data-link="education-open" class="mooc" href="https://www.edx.org">EdX</a>
  <a data-link="social-professional" class="networking" href="https://www.linkedin.com">Linkedin</a>
  <a data-link="More-links">More Links</a>
</div>

Example Link

We will apply the required styles using attribute selectors for the above document.

Attribute Selectors

CSS Attribute selectors select elements on the basis of attributes and their values. For example, we can match an element based on whether a particular attribute is present in an element or not.

p[lang='en']{
   color:blue;
}

In the above example, the paragraph having lang attribute with value 'en' will be selected and text color is set to blue.

We can match elements using the following attribute selectors:

[attribute]

It matches all the elements having the attribute named 'attribute'.

For links in our example document, we will add the following styles :

a[href]{
  text-decoration:none;
}

It will select all <a> tags with href attribute and set their text-decoration to none(as we don't want default styles for links).

[attribute=value]

It matches all the elements having the attribute named 'attribute' with a value of 'value'.

For our example document we will add the following styles :

h1[id="main-heading"]{
  font-family:sans-serif;
  color:darkslategrey;
}

The above ruleset will select <h1> tag with an id of 'main-heading' and apply styles to it.

[attribute~=value]

It matches all the elements having the attribute named 'attribute' whose value is a whitespace-separated list of words, one of which is the exact value.

For our example document, we will add the following styles which will fulfill part of our first requirement:

a[class~='networking']{
   border:8px darkslategrey solid;
}

[attribute|=value]

It matches all the elements having the attribute named 'attribute' whose value can be exactly 'value' or can begin with 'value' immediately followed by a hyphen (-).

For our example document, we will add the following styles which will fulfill our second requirement :

a[data-link|='social']{
  background-color:blue;
  color:white;
}

[attribute^=value]

It matches all the elements having the attribute named 'attribute' whose value is prefixed by 'value'.

For our example document we will add the following styles which will fulfill our third requirement :

a[href^='https']{
  outline:8px orange solid;
}

[attribute$=value]

It matches all the elements having the attribute named 'attribute' whose value is appended(followed) by 'value'.

For our example document, we will add the following styles which will fulfill our fourth requirement :

a[href$='.org']{
  color:red;
}

[attr*=value]

It matches all the elements having an attribute named 'attribute' whose value contains at least one occurrence of 'value'.

For our example document, we will add the following styles which will fulfill part of our first requirement:

a[data-link*='professional']{
   border-style: dashed!important;
}

[attribute operator value i]

Adding 'i' before closing bracket as shown in the below example, will match the value case-insensitively.

a[data-link='more-links' i]{
   color: blue;
}

Final layout - after applying all styles

html:

<h1 id="main-heading" style="text-align:center">Website Links</h1>

<div style="text-align:center">
  <a data-link="social-casual" class="networking" href="https://www.facebook.com">Facebook</a>
  <a data-link="education-open" class="mooc" href="https://www.khanacademy.org">Khan Academy</a>
  <a data-link="education-open" class="mooc" href="https://www.edx.org">EdX</a>
  <a data-link="social-professional" class="networking" href="https://www.linkedin.com">Linkedin</a>
  <a data-link="More-links">More Links</a>
</div>

css:

a{
  padding:12px;
  margin:12px;
  display: inline-block;
  font-size:20px;
  font-family:sans-serif;
}


a[href]{
 text-decoration:none;
}

h1[id="main-heading"]{
  font-family:sans-serif;
  color:darkslategrey;
}

a[href$='.org']{
  color:red;
}


a[href^='https']{
  outline:8px orange solid;
}

a[class~='networking']{
  border:8px darkslategrey solid;
}

a[data-link|='social']{
  background-color:blue;
  color:white;
}

a[data-link*='professional']{
  border-style: dashed!important;
}

a[data-link='more-links' i]{
  color: blue;
}

Example Link

We will discuss pseudo-selectors in the next article of this series.

Useful Resources

Share and support us

Share on social media and help us reach more people