CSS3 Selectors Cheat Sheet With Examples

The ultimate complete CSS3 Selectors Cheat sheet for your reference.

Cascading Style Sheets (CSS) is a stylesheet language used for describing the presentation of a document written in HTML or XML. CSS3 selectors are an integral part of CSS and are used to target specific elements on a webpage for styling.

There is a wide range of selectors in CSS3, each with its own unique syntax and behavior.

In this article, we will explore some of the most commonly used CSS3 selectors cheat sheet with examples and provide use cases of their usage.

1. Type Selectors

Type selectors are the simplest type of selectors in CSS3. They target HTML elements based on their tag name.

For example, the following CSS code targets all paragraphs on a webpage:

This code sets the color of all paragraph text on a webpage to red color.

p {
  color: red;
}

2. ID Selectors

ID selectors are used to targeting a specific HTML element based on its ID attribute. The ID attribute is a unique identifier assigned to an element, and should only be used once per page.

For example, the following CSS code targets an element with the ID “header”:

This code sets the background color of the element with the ID “header” to blue.

#header {
  background-color: blue;
}

3. Class Selectors

Class selectors are used to targeting elements that have a specific class attribute. Class attributes can be used multiple times on a page, allowing for multiple elements to be styled with the same CSS rules.

For example, the following CSS code targets all elements with the class “highlight”:

This code sets the background color of all elements with the class “highlight” to yellow.

.highlight {
  background-color: yellow;
}

4. Attribute Selectors

Attribute selectors are used to targeting elements based on the value of their attributes. There are several types of attribute selectors in CSS3, including the following:

• [attribute]: targets elements that have the specified attribute.
• [attribute=value]: targets elements that have the specified attribute with a value that matches the given value.
• [attribute~=value]: targets elements that have the specified attribute with a value that contains the given value as one of its words.
• [attribute|=value]: targets elements that have the specified attribute with a value that matches the given value, or starts with the given value followed by a hyphen.

For example, the following CSS code targets all links that have the attribute “target” set to “_blank”. This code sets the color of all links that have the attribute “target” set to “_blank” to red.

a[target="_blank"] {
  color: red;
}

5. Pseudo-Classes

Pseudo-classes are used to target elements based on their state or position in the document. There are several types of pseudo-classes in CSS3, including the following:

• :hover: targets an element when the mouse pointer is over it.
• :active: targets an element when it is being clicked or tapped.
• :focus: targets an element when it has focus, such as when a user is typing into a form field.
• :nth-child(n): targets an element based on its position in a parent element.

For example, the following CSS code targets all links when the mouse pointer is over them:

a:hover {
  text-decoration: underline;
}

6. Pseudo-Elements

Pseudo-elements are used to target specific parts of an element, such as the first letter or the content after an element. There are several types of pseudo-elements in CSS3, including the following:

• ::before: targets content before an element.
• ::after: targets content after an element.
• ::first-letter: targets the
• :first-line: targets the first line of text in an element.

For example, the following CSS code targets the first letter of all paragraphs:

p::first-letter {
  font-size: 2em;
  color: red;
}

7. Combinators

Combinators are used to combine multiple selectors to create more specific targeting of elements. There are several types of combinators in CSS3, including the following:

• Descendant selector (space): targets an element that is a descendant of another element.
• Child selector (>): targets an element that is a direct child of another element.
• Adjacent sibling selector (+): targets an element that immediately follows another element.
• General sibling selector (~): targets an element that follows another element.

For example, the following CSS code targets all span elements that are descendants of div elements:

div span {
  font-weight: bold;
}

CSS3 selectors are a powerful tool for targeting specific elements on a webpage for styling. They provide a wide range of options for targeting elements based on their type, ID, class, attributes, state, position, and relationship to other elements. By understanding how these selectors work and using them effectively, you can create more dynamic and visually appealing webpages.