CSS Selectors - Attribute Selectors in detail

By Srijan 19 August, 2018
css selector
Image from Pixabay

Introduction

In this article, we are going to discuss CSS Attribute selectors in detail. We are going to design a web page which 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:

  1. 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.
  2. For a social website, background color should be blue and text color should be white.
  3. If the link uses https, it should have an orange outline.
  4. For all .org domain, text-color should be red.

Below is the final layout :

css selector
Final Layout

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

See the Pen WgeMVz by SRIJAN (@SRIJAN1709) on CodePen.

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

Attribute Selectors

CSS Attribute selectors select elements on 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 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 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 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 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 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 following styles which will fulfill our fourth requirement :

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

[attr*=value]

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

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

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

[attribute operator value i]

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

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

Final layout - after applying all styles

See the Pen Attribute Selectors Example Complete by SRIJAN (@SRIJAN1709) on CodePen.

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

Recommended Reading

Useful Resources

Follow us on
Sponsored