β‘ Learn CSS selectors in one thread β‘
The only thread you need to learn about CSS Selectors.
A Mega Thread π§΅
The only thread you need to learn about CSS Selectors.
A Mega Thread π§΅
π CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style.
π A selector is the first part of a CSS Rule. Typically a pattern or term decides which HTML element it needs to select. The Elements that are selected are called subjects of the selector.
π Selector lists: If you have two elements that have the same styling then you can combine both of the selectors to make a selectors list. we use commas for this.
Example:
Example:
π Types of selectors: There are different groups of selectors that serve various use cases while selecting elements
β‘ Universal selector
β‘ Type, class, and ID selectors
β‘ Attribute selectors
β‘ Pseudo-classes and pseudo-elements
β‘ Combinators
β‘ Universal selector
β‘ Type, class, and ID selectors
β‘ Attribute selectors
β‘ Pseudo-classes and pseudo-elements
β‘ Combinators
β‘ Universal selector: Universal Selectors are the one that selects all the elements of an HTML Page. It is generally used for CSS resets and applying global styles.
Example:
Example:
π Type, class, and ID selectors: These are used for selecting HTML Elements, and these targets HTML elements.
β‘ Element Selector
β‘ Class selector
β‘ ID selector
β‘ Element Selector
β‘ Class selector
β‘ ID selector
π Element Selector: This basically selects an element by its element name, using this will select all the elements on the page when specified.
If we select <p> element it will by default select all <p> elements in the page. we use 'tag' for this.
Example:
If we select <p> element it will by default select all <p> elements in the page. we use 'tag' for this.
Example:
π Class selector: This selector selects the specific class in an HTML page. It is generally used for styling multiple elements. Will style all the elements which will have the same class name.
we use ' . ' for this.
Example:
we use ' . ' for this.
Example:
π ID selector: These are used to select a unique item that you need to style. Id can't be repeated it should be unique. so if you want to style something with id use this. we use ' # ' for this.
Example:
Example:
π Attribute selectors: These are the Selectors that allow selecting elements based on certain attributes on an element.
Example:
Example:
π Pseudo-classes: Pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
Example:
Example:
π Pseudo-elements: Pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
Example:
Example:
π Combinators: These selectors combine other selectors in order to target elements within our documents.
β‘ Descendant combinator
β‘ Child combinator
β‘ Adjacent sibling combinator
β‘ General sibling combinator
β‘ Descendant combinator
β‘ Child combinator
β‘ Adjacent sibling combinator
β‘ General sibling combinator
π Descendant combinator: A descendant selector in CSS is any selector with white space between two selectors without a combinator.
Example:
ul li { } for example. It means βany list item that is a descendant of an unordered list.β
Example:
ul li { } for example. It means βany list item that is a descendant of an unordered list.β
π Child combinator: A child combinator in CSS is the βgreater thanβ symbol. It means βselect elements that are direct descendants onlyβ.
Example:
codepen.io/team/css-trickβ¦
Example:
codepen.io/team/css-trickβ¦
π Adjacent sibling combinator: The adjacent sibling combinator in CSS isnβt a selector on its own, but a way of combining two selectors.
Example:
codepen.io/saracope/pen/pβ¦
Example:
codepen.io/saracope/pen/pβ¦
π General sibling combinator: The general sibling combinator selector is very similar to the adjacent sibling combinator selector The difference is that the element being selected doesnβt need to immediately succeed the first element, but can appear anywhere after it.
π CSS Selector Reference Table.
Source: MDN.
Source: MDN.
Hey Everyone π I am Ashish.
Helping you become a better web developer.
Daily content on Web development tips, threads, and dev tools.
If you find this helpful then.
π Follow me
β€οΈ Like it
π Retweet the first tweet.
Helping you become a better web developer.
Daily content on Web development tips, threads, and dev tools.
If you find this helpful then.
π Follow me
β€οΈ Like it
π Retweet the first tweet.
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
