Selectors in CSS

Introduction

The content you want to style is chosen using CSS selectors. The CSS rule set includes these selectors. CSS selectors choose or select these HTML elements based on their id, class, type, attribute, etc. When choosing elements to style, a large range of CSS selectors are accessible, enabling fine-grained precision.

You might have already encountered selectors. The first component of a CSS Rule is a CSS selector. It is a set of phrases and patterns that instruct the browser which HTML elements to pick in order to apply the CSS property values contained in the rule to them. The subject of the selector is the element or items that were chosen by the selector.

There are five different kinds of CSS Selectors:-

1. Simple Selectors
2. Combinator Selectors
3. Pseudo-class Selectors
4. Pseudo-elements Selectors
5. Attribute Selectors

Now we will look into each of them in detail.

Also Read Position property in CSS

Simple selectors

A simple selector selects elements based on name, id, and class. The different types are CSS element, id, class, universal, and grouping selectors.

CSS element Selector

Based on the element name, the element selector chooses HTML elements.

h2 {
  text-align: center;
  color: purple;
}

CSS id Selector

The id selector chooses a particular HTML element by using the id attribute. the id selector is used to choose a single distinct element because each element’s id is distinct inside a page.

A hash (#) character should be written after the element’s id in order to pick it.

#main {
  text-align: center;
  color: purple;
}

CSS class Selector

HTML components having a specific class attribute are chosen using the class selector. Put a period (.) before the class name to select elements that belong to that class.

.sku {
  text-align: center;
  color: purple;
}

CSS Universal Selector

All HTML items on the page are selected by the universal or the global selector (*).

* {
  text-align: center;
  color: purple;
}

CSS Grouping Selector

All HTML elements that share the same style definitions are chosen by the grouping selector.

h1, h2, p {
  text-align: center;
  color: purple;
}

Combinator selectors

Something that illustrates how the selectors relate to one another is called a combinator. More than one simple selector may be included in a CSS selector. We can sandwich a combinator between the straightforward selectors.

In CSS, there are four distinct combinators:

1. adjacent sibling selector (+)
2. child selector (>)
3. descendant selector (space)
4. general sibling selector (~)

Adjacent sibling selector (+)

The adjacent sibling selector is used to choose an element that follows another particular element exactly. Adjacent means “immediately after,” and sibling elements must share the same parent element.

The first <p> element that is positioned right after <div> elements is chosen in the example below:

div + p {
  background-color: purple;
}

Child selector (>)

The child selector chooses all elements that are a specific element’s offspring.
The example that follows chooses or selects every <p> element that is a <div> element’s child:

div > p {
  background-color: purple;
}

Descendant selector (space)

All elements that are descendants of a given element are matched by the descendant selector.
The example that follows picks out every <p> element contained inside a <div> element:

div p {
  background-color: purple;
}

General sibling selector (~)

The generic sibling selection chooses every element that is a specified element’s next sibling.
The example that follows chooses all p elements that are a div element’s next siblings:

div ~ p {
  background-color: purple;
}

Pseudo-class selectors

A specific state of an element is specified by a pseudo-class.

It can be utilized, for instance, to:

1. When a user hovers their mouse over an element, it styles
2. Style the links that have been visited and those that have not
3. Style a component when it is highlighted or focused.

HTML classes and pseudo-classes can be combined:

The box-shadow will be applied to the element when you hover over it.

image-wrapper:hover {
  box-shadow: 0 2px 16px 0 rgb(0 0 0 / 14%);
}

Working with links:

/* styles will be applied before visiting the link */
a:link {
  color: blue;
}

/* styles will be applied once the link is clicked */
a:visited {
  color: green;
}

/* styles will be applied when you hover on the link */
a:hover {
  color: red;
}

/* styles will be applied when you selected the link */
a:active {
  color: purple;
}

Pseudo-elements selectors

To style certain areas of an element, use a CSS pseudo-element.

It can be utilized, for instance:

1. To style the element’s initial letter or line.
2. Add content either before or after an element’s content.

::first-line Pseudo-element

To give the first line of a text a unique look, use the::first-line pseudo-element.

p::first-line {
  color: #ff0100;
  font-variant: common-ligatures small-caps;
}

::first-letter Pseudo-element

To give the first letter of a text a unique look, use the::first-letter pseudo-element.

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

Multiple Pseudo-elements

::before Pseudo-element

You can introduce content before an element’s content by using the::before pseudo-element.

h1::before {
  content: url(ani.gif);
}

::after Pseudo-element

To add content after the content of an element, use the::after pseudo-element.

h1::after {
  content: url(ani.gif);
}

::marker Pseudo-element

The list items’ markers are chosen by the::marker pseudo-element.

::marker {
  color: purple;
  font-size: 25px;
}

::selection Pseudo-element

The ::selection A pseudo-element corresponds to the area of an element the user has chosen.

To ::selection, the following CSS attributes can be used: color, background, cursor, and outline.

::selection {
  color: white;
  background: purple;
}

Attribute selectors

[attribute] Selector

Elements having a certain property are selected using the [attribute] selector.

The example below chooses every <a> element with a target attribute:

a[target] {
  background-color: purple;
}

[attribute=”value”] Selector

To choose items with a given attribute and value, use the selector [attribute=”value”].

The example below chooses every <a> element with the attribute target=”_blank”:

a[target="_blank"] {
  background-color: purple;
}

[attribute~=”value”] Selector

Elements with an attribute value containing a certain word are chosen using the [attribute=”value”] selector.

The example that follows chooses all items that have a title attribute and a list of words that are separated by spaces, one of which is “cake”:

[title~="cake"] {
  border: 8px solid purple;
}

[attribute|=”value”] Selector

Using the [attribute|=”value”] selector, items having the supplied attribute are chosen. The selected attribute’s value may be either the precise value specified or the specified value followed by a hyphen (-), like class=”first-name”.

[class|="first"] {
  color: purple;
}

[attribute^=”value”] Selector

Elements with the specified attribute, whose value begins with the supplied value, are selected using the [attribute=”value”] selector.

The example that follows chooses all elements whose class attribute value begins with “last”:

[class^="last"] {
  color: purple;
}

[attribute$=”value”] Selector

Elements whose attribute value ends with a given value are selected using the [attribute$=”value”] selector.

[class$="name"] {
  color: purple;
}

[attribute*=”value”] Selector

Elements whose attribute value contains a specified value are selected using the [attribute*=”value”] selector.

The example that follows chooses every element whose class attribute value contains the letter “name”:

[class*="name"] {
  font-size: 25px;
}

Conclusion

In this article, we learned about CSS Selectors and their different types. We learned about simple selectors, Combinator Selectors, Pseudo-class Selectors, Pseudo-elements Selectors, and Attribute Selectors.

Hope this article helps you in understanding CSS Selectors.