CSS Selectors

CSS Selectors

CSS Selectors are used to select a particular HTML element based on their name, id, class, attribute, attribute value or state. There are 6 types of CSS Selectors.

Table of Contents

Types of CSS Selectors

It's not necessary that a selector would always be the name of the particular element. There are 5 main types of Selectors in CSS. Some of them are as follow.

  • Simple Selectors
  • Attribute Selectors
  • Attribute Value Selectors
  • Combinator Selectors
  • Pseudo-class Selectors
  • Pseudo-elements Selectors

Simple Selectors

Simple CSS Selectors are those selectors which select HTML Elements based on their name, id or class, irrespective of their state or relationship with other elements.

  • Universal Selector
  • Element Selector or Type Selector
  • Id Selector
  • Class Selector
  • Attribute Selector
Simple CSS Selectors

CSS Attribute Selectors

The CSS Attribute Selectors select or target HTML Elements based on their attribute or they only select html elements with a specified attribute.

Example of CSS Attribute Selector

The following example will only select anchor elements with title attribute.

a[title] {
color: red;
}
CSS Attribute Selectors

CSS Attribute Value Selectors

The CSS Attribute Value Selectors select HTML Elements with a specified attribute and value. There are 6 types of CSS Attribute Value Selectors.

Example of CSS Attribute Value Selectors

Square brackets are also used while using CSS Attribute Value Selectors.

The following example will only select anchor elements with target='_blank'.

a[target='_blank'] {
background-color: red;
}
CSS Attribute Value Selectors

Combinator Selectors

CSS Combinator defines the relationship between the selectors. A CSS Combinator can be used between two CSS Selectors. There are 4 types of CSS Combinators.

  • Descendant Selector (space)
  • Child Selector (>)
  • Adjacent Sibling Selector (+)
  • General Sibling Selector (~)
CSS Combinator Selectors

Pseudo-class Selectors

A Pseudo-Class Selector is used to define the specific state of element. There are 31 types of Pseudo-class Selectors.

  • :active
  • :checked
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :hover
  • :in-range
  • :invalid
  • :lang(language)
  • :last-child
  • :last-of-type
  • :link
  • :not(selector)
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-last-of-type(n)
  • :nth-of-type(n)
  • :only-of-type
  • :only-child
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :root
  • :target
  • :valid
  • :visited
CSS Pseudo Class Selectors

Pseudo-elements Selectors

A CSS Pseudo-element Selector is used to define style of specified parts of HTML element. There are five types of Pseudo-elements Selectors.

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
CSS Pseudo Elements Selectors

Grouping CSS Selectors

If we want to apply same style to different types of elements then we can also group them together. So that we won't have to write the same code again and again for different elements. Look at the example below.

p
{
font-weight:bold;
text-align: center;
color: blue;
}
h1
{
font-weight:bold;
text-align: center;
color: blue;
}
h4
{
font-weight:bold;
text-align: center;
color: blue;
}

Now instead of writing same CSS code for different elements, separately, we can group them to minimize our css code.

We will use comma to separate the selectors.

p, h1, h4
{
font-weight:bold;
text-align: center;
color: blue;
}

In the above example, all three elements, p, h1 and h4 will have same styling.

Tags