Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 8, 2020 03:39 am GMT

CSS-Selectors Guide

CSS Selectors

I put together a guide for some super important and yet confusing CSS-Selectors. The list should help you clear the confusion between many of them, or simply use this guide as a 5-minutes review book to prep yourself before that interview.

Descendant Selector

A B /* selects any B elements that are inside of the element A */

Comma Combinator

A, B/* selects all A and B elements */

Universal Selector

*/* selects all elements */

Adjacent Sibling Selector

A + B/* This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth. *//* div + a selects every a element that directly follows a div */

General Sibling Selector

A ~ B/* You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one. *//* A ~ B selects all B that follow a A */

General vs Adjacent Sibling Selector: With the general sibling combinator, one or potentially multiple elements will be styled. With the adjacent sibling combinator, only one element will be styled.

Child Selector

A > B/* A > B selects all B that are a direct children A */

First Child Pseudo-selector

:first-child/* p:first-child selects all first child p elements. */

Only Child Pseudo-selector

:only-child/* span:only-child selects the span elements that are the only child of some other element. */

Last Child Pseudo-selector

:last-child/* span:last-child selects all last-child span elements. */

Nth Child Pseudo-selector

:nth-child(A)/* :nth-child(8) selects every element that is the 8th child of another element. */:nth-child(odd)/* :nth-child(odd) selects every odd element */:nth-child(even)/* :nth-child(even) selects every even element */

Nth Last Child Selector

/* Selects the children from the bottom of the parent. This is like nth-child, but counting from the back! */:nth-last-child(A)/* :nth-last-child(2) selects all second-to-last child elements. */

First of Type Selector

:first-of-type/* span:first-of-type selects the first span in any element. */

Nth of Type Selector

/* Selects a specific element based on its type and order in another element - or even or odd instances of that element. */:nth-of-type(A)/* div:nth-of-type(2) selects the second instance of a div. */

Nth-of-type Selector with Formula

/* The nth-of-type formula selects every nth element, starting the count at a specific instance of that element. */:nth-of-type(An+B)/* span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance. */

Only of Type Selector

/* Selects the only element of its type within another element. */:only-of-type/* p span:only-of-type selects a span within any p if it is the only span in there. */

Last of Type Selector

/* Select the last element of a specific type */:last-of-type/* div:last-of-type selects the last div in every element. */

Empty Selector

/* Select elements that don't have children */:empty

Negation Pseudo-class

/* Select all elements that don't match the negation selector */:not(X)/* :not(.someClass) selects all elements that do not have class="someClass" */

Original Link: https://dev.to/ronakjethwa/css-selectors-guide-4gii

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To