All CSS Selectors You Must Know

If you are new to CSS then you might not aware of some of the interesting CSS selectors other than class, id, and descendant. In CSS3, there are a wide variety of selectors available, from beginners to advanced levels. And in this article, we are going to discuss all of them with examples.

Before starting with the list of selectors, let’s first discuss what selectors are and why to use them.

I. CSS Selectors

CSS selectors are the first part of the CSS rule. They are used to target the HTML element that we want to style on our web page. CSS selectors are the patterns of elements that tell the browser which HTML elements to select and apply with the CSS property. Also, the selected element is referred to as the subject of selector.

II. List Of CSS Selectors

1. Basic Selectors

i. *

This universal selector targets all the elements on the web page. Optionally it may be restricted to a specific namespace or all namespaces.

ii. X

This type selector selects all the elements of the given node name on the web page. It selects all the elements of the given type.

Example: div

iii. #X

This id selector selects the element based on the value of the id attribute. Its value should be unique in the document, meaning there can be only one element with the given ID.

Example: #data

iv. .X

The class selector selects all the elements with the specific class name attribute. Using class, you can select multiple elements as there can be n number of elements with the given class.

Example: .d

2. Attribute Selectors

i.  [data-attr]

This has attribute will select the element which have a data-attr attribute with or without value.

ii. [data-attr=”123”]

This exact attribute checks for the particular value. It will select the element whose attribute value is set to 123.

iii. [data-attr^=”12”]

What if we want to check the partial match of a value from the beginning then we use begins with attribute. It selects the elements which have the value “12” at the beginning.

iv. [data-attr$=”23”]

What if we want to check the partial match of a value from the end then we use ends with attribute. It selects the elements which have the value “23” at the end.

v. [data-attr*=”23”]

This substring attribute selects the elements which have the ”23” anywhere inside the attribute value.

3. Grouping Selectors

i. X, Y

This is the or selector that selects all the matching elements.

Example: div, a( this will select all the div and a together).

ii. X.Y

It is an and selector that selects elements that match all the selector combinations.

Example: div.p (this will select all the div elements with a p class).

4. Combinators

i. X Y

The descendant combinator is one of the common selectors. We use this selector when we want a selection to be more specific.

Example: div a (this will select all the anchor tag elements inside the div).

ii. X + Y

This is an adjacent combinator that selects only the element that comes immediately after the former element.

Example: div + p (this will select only the first paragraph that comes immediately after each div).

iii. X > Y

This is the direct child combinator that selects the direct child of the first element.

Example: div > ul (this will select only that ul which is the first child of the div element).

iv. X ~ Y

This is a siblings combinator that selects siblings. This is the more generalized form of X + Y combinator as it selects only the element that comes immediately after the former element. While X ~ Y selects all the elements.

Example: div ~ p (this will select all the paragraph that comes after each div).

5. Pseudo Selectors

i. X:before

Before selector creates an empty element directly before the child of the selected element.

Example: div:before

ii. X:after

After selector creates an empty element directly after the child of the selected element.

Example: div:after

iii. X:first-child

The first child selector selects the very first child of the element inside the container.

Example: a:first-child

iv. X:last-child

Last child selector is the reverse of first child it selects the last child of the element inside the container.

Example: a:last-child

v. X:nth-child(n)

What if we want to select from the middle then we use the nth child selector and pass the order number of the child in the parameter.

Example: a:nth-child(2)

vi. X:nth-last-child(n)

This is the reverse of nth child what if we want to select the child from the last then we use the nth last child selector. It selects the child element from the last.

Example: a:nth-last-child(3)

vii. X:only-child

Only child selector allows you to select the elements that are the only child of the parent.

Example: a:only-child

viii. X:first-of-type

First of type selector allows you to select the sibling elements that are first of the type.

Example: a:first-of-type

ix. X:last-of-type

Last of type selector is the reverse of first to type it select the sibling elements that are the last of the type.

Example: a:last-of-type

x. X:nth-of-type(n)

What if we want to select the only type of the element from the middle then we use the nth of type selector and pass the order number of the child in the parameter.

Example: a:nth-of-type(2)

xi. X:nth-last-of-type(n)

This is the reverse of nth of type what if we want to select the only type of the element from the last then we use the nth last of type selector. It selects the only type element from the last.

Example: a:nth-last-of-type(3)

xii. X:only-of-type

Only of type selector allows you to select the elements that are the only type element of the parent.

Example: a:only-of-type

xiii. X:not(.Y)

Not selector allows you to select all the elements that do not match the selector inside the not selector.

Example: a:not(.p)

Hopefully, you loved and understood all the selectors. If you have any questions or suggestions you can write us in the comment section below.

Happy Coding!