All the CSS Selectors You Should Know
Tags: css
Published: 2020-06-24 16:40:09

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](https://www.twitter.com/GarvitMotwani).