Tutorials Tonight
Follow Us

CSS Selectors


Before applying CSS to HTML elements we must first learn how to select the element. In this tutorial, you will learn about the most commonly used CSS selectors.

Introducing CSS Selectors

The CSS selector is used to select HTML element/elements in the webpage.

The CSS selector is the part of the CSS ruleset that is used to select the element you want to style. The CSS selector is placed before the curly braces in the CSS ruleset.

CSS selectors
CSS selectors visualized

As you can see in the above image CSS selector target single or multiple HTML elements that match the selection.

When the selector is matched with HTML elements then CSS declarations defined in the block are applied to those HTML elements.

Note: In CSS there is no selector or combinator to select parent, sibling of parent elements, and child of parent sibling.

CSS provides us with various ways to select an element. Some of the ways are mentioned below.


Types of CSS selectors

There are several different types of CSS selectors. We will discuss here a few main and most commonly used selectors.

  1. Universal selector CSS
  2. Element selector
  3. Class selector CSS
  4. ID selector CSS
  5. Attribute selector
  6. Pseudo-class selector
  7. Pseudo-element selector
  8. Group selector

1. Universal selector CSS

The universal selector is used to select all the elements in the document. It is represented by the asterisk symbol *.

It is used to apply the same CSS declaration to all the elements in the document.

It is not recommended to use the universal selector as it will increase the specificity of the CSS declaration.

The universal selector is used by many developers to reset the default browser styles like margin, padding, etc.

Example

* {
  margin: 0;
  padding: 0;
}
▶ Try it

2. Element selector

The element selector is used to select the HTML element by its name. It is represented by the element name.

It is used to apply the same CSS declaration to all the elements with the same name.

To select the element write the element name and provide CSS properties in the curly braces.

Example

p {
  color: blue;
  text-align: center;
}

a {
  color: red;
}
▶ Try it

In the above example there are 2 element selectors, 1st select all the paragraphs in the webpage and 2nd select all the anchor texts.


3. Class selector CSS

The class selector is used to select the HTML element by its class name. It is represented by the dot symbol . followed by the class name.

It is used to apply the same CSS declaration to all the elements with the same class name.

Example

.box{
  padding: 10px;
  border: 1px solid blue;
}
▶ Try it

You can add multiple classes to a single element. The element will reflex all CSS declarations of added class.

Example

.class1 {
  color: red;
}

.class2 {
  font-size: 25px;
}

.class3 {
  text-align: center;
}
▶ Try it

4. Id selector CSS

The id selector is used to select a unique targeted element.

It is represented by the hash symbol # followed by the id name.

The disadvantage of using an id selector is that it can be used only once in a document as it is unique.

Example

#user {
  color: red;
  font-size: 20px;
}
▶ Try it

5. CSS attribute selector

The attribute selector is used to select the HTML element by its attribute name or attribute value.

It is represented by the square brackets [ ] and the attribute name inside the square brackets. For example, [attribute].

Example

[title] {
  color: red;
  background-color: yellow;
  text-align: center;
}
▶ Try it

You can also select all elements with a given attribute regardless of their value.

To select an element based on an attribute value write the attribute name in a square bracket and give its value in quotes [attribute="value"].

Example

[title="my title"] {
  color: red;
  background-color: yellow;
  text-align: center;
}
▶ Try it

6. CSS pseudo-class selector

The pseudo-class selector is used to select the HTML element by its state.

It is represented by the colon : followed by the pseudo-class name.

There are many pseudo-classes available in CSS. Some of them are listed below.

Pseudo-classDescription
:linkSelects all the unvisited links.
:visitedSelects all the visited links.
:hoverSelects the element when the mouse pointer is over it.
:activeSelects the element when it is being activated by the user.
:focusSelects the element when it has focus.
:first-childSelects the first child element of its parent.
:last-childSelects the last child element of its parent.
:nth-child(n)Selects the nth child element of its parent.
:nth-last-child(n)Selects the nth child element of its parent, counting from the last one.
:only-childSelects the element if it is the only child of its parent.
:first-of-typeSelects the first element of its type.
:last-of-typeSelects the last element of its type.
:nth-of-type(n)Selects the nth element of its type.
:nth-last-of-type(n)Selects the nth element of its type, counting from the last one.
:only-of-typeSelects the element if it is the only element of its type.
:emptySelects the element if it has no children (including text nodes).
:rootSelects the document's root element.
:targetSelects the current active element (clicked on a URL containing that anchor name).
:enabledSelects every enabled <input> element.
:disabledSelects every disabled <input> element.
:checkedSelects every checked <input> element.
:not(selector)Selects every element that is not matched by the selector.

Example

a:link {
  color: red;
}

a:visited {
  color: green;
}

a:hover {
  color: blue;
}
▶ Try it

7. CSS pseudo-element selector

The pseudo-element selector is used to style specified parts of an element.

It is represented by the double colon :: followed by the pseudo-element name.

There are many pseudo-elements available in CSS. Some of them are listed below.

Pseudo-elementDescription
::beforeInserts something before the content of an element.
::afterInserts something after the content of an element.
::first-lineSelects the first line of text in an element.
::first-letterSelects the first letter of the text in an element.
::selectionSelects the portion of an element that is selected by a user.
::placeholderSelects the placeholder text of an element.
::backdropSelects the backdrop of a <dialog> element.
::markerSelects the list item marker of a <li> element.
::spelling-errorSelects misspelled words.
::grammar-errorSelects grammatically incorrect words.

Example

div::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: red;
}

p::first-line {
  color: red;
}

p::first-letter {
  font-size: 30px;
}

input::placeholder {
  font-style: italic;
}
▶ Try it

8. Group selector

The group selector is used to select elements that have the same style declarations.

You can group multiple same or different types of selectors for the same style definition.

Suppose we have the same CSS declarations for the multiple-element as shown in the example below.

p { 
    color: red;
    background-color: yellow;
}
h1 { 
    color: red;
    background-color: yellow;
}
h3 { 
    color: red;
    background-color: yellow;
}

Instead of defining CSS property like as above, we can use a group selector. In group selector, we define a single CSS code, and the selector is separated with a comma.

Example

p,
h1,
h3 { 
    color: red;
    background-color: yellow;
}
▶ Try it

You can also use different selectors together as a group selector on an element.

Example

p,
.heading,
#tag {
  color: red;
  background-color: yellow;
  text-align: center;
}
▶ Try it