All the CSS Selectors You Should Know

Hey Folks! My Name is Garvit Motwani and In This article I will tell you all the CSS Selectors you should know.

The Basic Ones

Universal - * - Selects all the elements

Type - example -: div - Selects all the elements of that type

Class - .class-name - Selects all the elements with that class.

Id - #id-name - Selects all the elements with that id.

Combination Selectors

Descendant - div p - Selects the elements that are desendant of the first element.

Direct Child - div > p - Selects elements that are direct children of the first element.

General Sibling - div ~ p - Select elements that are siblings of the first element and come after the first.

Adjacent Sibling - div + p - Selects elements that are siblings of the first element and come directly after the first element.

Or - div, p - Select elements that match any selector in the list

And - div.class-name - Select elements that match all the selector combinations

Attribute

Has - [a] - Select elements that have that attribute

Exact - [a="1"] - Select elements that have that attribute with exactly that value

Begins With - [a^="1"] - Select elements that have that attribute which start with that value.

Ends With - [a$="1"] - Select elements that have that attribute which end with that value

Substring - [a*="1"] - Selects elements that have that attribute which contains that value anywhere

Pseudo Element

Before - div::before - Creates an empty element directly before the children of selected element.

After - div::after - Creates an empty element directly after the children of the selected element.

Pseudo Class

Hover - button:hover - Select elements that are hovered by the mouse.

Focus - button:focus - Select elements that are focused.

Required - input:required - Select inputs that are required.

Checked - input:checked - Select checkboxes/radio buttons that are checked.

Disabled - input:disabled - Select inputs that are disabled.

First Child - a:first-child - Select elements that are the first child in a parent element.

Last Child - a:last-child - Select elements that are the last child in a parent element.

Nth Child - a:nth-child(2n) - Select elements that are the nth child inside a container based on the formula.

Nth Last Child - a:nth-last-child(3) - Select elements that are the nth child inside a container based on the formula counting from the end.

Only Child - a:only-child - Select elements that are the only child inside the container.

First Of Type - a:first-of-type - Select elements that are the first of a type inside a container

Last Of Type - a:last-of-type - Select elements that are the last of a type inside a container

Nth Of Type - a:nth-of-type(2n) - Select elements that are the nth of a type inside a container based on the formula.

Nth Last Of Type - a:nth-last-of-type(2) - Select elements that are the nth of a type inside a container based on the formula counting from the end.

Only Of Type - a:only-of-type - Select elements that are the only of a type inside a container

Not - a:not(.class-name) - Select all elements that do not match the selector inside the not selector.

If I Missed A Selector Type It Out In The Discussion or DM Me on My Twitter.