CSS Selectors Cheat Sheet

Posted by Adarshreddy Adelli

Saturday, February 8, 2020

CSS is a love for modern designers and web developers. The best part of CSS is the reusability of its code. CSS selectors help to write beautiful and responsive code for each element in Html. Let's dive into selectors.

CSS Selectors | gspace

*{}

Selects all elements

:root{ ...... }

Selects the document's root element.

p{.....}

Selects all <p> elements

.intro{........}

Selects all elements with class="intro"

p.intro{}

Selects <p> elements with class="intro"

#firstname{.......}

Selects the element with id="firstname".

div , p { .... }

Selects all div elements and all <p> elements.

div p {...}

Selects all <p> elements inside <div> elements.

div + p{ ... }

Selects all <p> elements that are placed immediately after <div>.

div>p 

Selects <p> elements where parent is a <div>.

p~ul{ ... }

Selects every <ul> element that is preceded by a <p> element.

[target]{ ... }

Selects all elements with a target attribute.

[target=_Self]{ ... }

Selects all elements with target="_Self"

:not(p){   .......   }

Selects every element that is not a <p> element.

p:empty{ ..... }

Selects every <p> elements that has no children.

p:first-child{ ..... }

Selects every <p> element that is the first child.

p:nth-child(2){ ..... }

Selects every <p> element that is second child.

p:only-child{ ...... }


Selects every <p> element that is the only child.

Adarshreddy Adelli Saturday, February 8, 2020 CSS web development