22
loading...
Selecting The RIGHT way in CSS!! 🎨
For all those frontend enthusiasts out there, I have provided this brief and as clearly as possible description of all CSS selectors and combinators. Do not hesitate to try them out because practice makes perfect! 😉
Selectors in CSS are used to select the appropriate HTML element you want to style. 🥸
Several CSS selectors exist for versatility in selection.
Several CSS selectors exist for versatility in selection.
Eg: .outer
Selects all elements which have the given class. (Outer class in our example)
Eg: #name
Selects the HTML element which has the given id. (name in our example case)
(Quick Fact: ID is unique in whole document unlike classes)
(Quick Fact: ID is unique in whole document unlike classes)
Eg: h1
Directly select all the specified HTML element on the document.
Directly select all the specified HTML element on the document.
Selector: *
Universal Selector! Selects Everything!!
Eg: img[href]
Selects the given attribute of the given tag from DOM.
(Quick Tip: You can even specify the attribute value to select a particular element.
(Quick Tip: You can even specify the attribute value to select a particular element.
For Eg: a[href="
This selects all anchor tags which have the given href!)
https://example.com"]This selects all anchor tags which have the given href!)
Eg: button:hover
Pseudo classes are special keywords which specify a special state of an element. Like hover state on button, focus state on input etc. (Our example targets the hover state of all buttons on the DOM).
Check this to know more about all types of pseudo classes!
Check this to know more about all types of pseudo classes!
Eg: p::first-letter
Pseudo element selector are those which let you target a specific part of an element.
(Given example targets the first letter of all paragraph tags present in our DOM)
Check this to know more about all types of pseudo classes!
(Given example targets the first letter of all paragraph tags present in our DOM)
Check this to know more about all types of pseudo classes!
Combinators are used to specify relationship between two selectors. 🤝
Eg: h1 p ( space ) 🌌
The descendant combinator targets all the second mentioned elements (p in our example) who are the descendant or in other words have the first mentioned element as a parent or ancestor.
(Given example selects all p tags which have h1 as their parent or ancestor)
(Given example selects all p tags which have h1 as their parent or ancestor)
Eg: ul > li
This selects only those elements matched by the second selector that are the direct children of elements matched by the first.
(Given example selects all li elements which are direct children of ul)
(Given example selects all li elements which are direct children of ul)
Eg: h1 + p ( + ) 🧑🤝🧑
This combinator separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent.
(Example selects p tags if its followed by a h1 tag and both belongs to a same parent)
(Example selects p tags if its followed by a h1 tag and both belongs to a same parent)
Eh: h1 ~ p
This matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent.
(Our example selects all the p tags which are following h1 tag (can be multiple p tags) unlike the Adjacent sibling selector which selects only the first occurrence)
(Our example selects all the p tags which are following h1 tag (can be multiple p tags) unlike the Adjacent sibling selector which selects only the first occurrence)
22