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.

All CSS Selectors You Must Know
Universal Selector

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

type
Type Selector

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

All CSS Selectors You Must Know
Id Selector

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

Class
Class Selector

2. Attribute Selectors

i.  [data-attr]

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

All CSS Selectors You Must Know
Has Attribute

ii. [data-attr=”123”]

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

Exact
Exact Attribute

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.

All CSS Selectors You Must Know
Begins With Attribute

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.

Ends With Attribute
Ends With Attribute

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

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

All CSS Selectors You Must Know
Substring Attribute

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).

All CSS Selectors You Must Know
Or Selector

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).

All CSS Selectors You Must Know
And Selector

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).

Descendant Selector
Descendant Selector

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).

All CSS Selectors You Must Know
Adjacent Sibling Selector

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).

direct child
Direct Child Selector

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).

General Sibling
General Sibling Selector

5. Pseudo Selectors

i. X:before

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

Example: div:before

All CSS Selectors You Must Know
Before Selector

ii. X:after

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

Example: div:after

after
After Selector

iii. X:first-child

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

Example: a:first-child

first-child
First Child Selector

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

All CSS Selectors You Must Know
Last Child Selector

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)

All CSS Selectors You Must Know
Nth Child Selector

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)

All CSS Selectors You Must Know
Nth Last Child Selector

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

only-child
Only Child Selector

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

First of type
First Of Type Selector

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

All CSS Selectors You Must Know
Last Of Type Selector

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)

nth of type
Nth Of Type Selector

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)

nth last of type
Nth Last Of Type Selector

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

All CSS Selectors You Must Know
Only Of Type Selector

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)

Not Selector
Not Selector

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!

Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here

Leave a Reply

Your email address will not be published.