An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
June 8, 2020 03:39 am GMT
Original Link: https://dev.to/ronakjethwa/css-selectors-guide-4gii
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To