Speedwalking through CSS Selectors
CSS Selectors are utilities provided that allow the developer to target HTML elements and apply a style to them specifically. Here are a few common ones everyone should be aware of.
Universal Selector ( * )
As simple as it sounds. Used to target EVERY element in the HTML. Useful to set up a theme/global style.
Class Selector ( .a )
The most obvious one that everyone knows. Selects all elements with class name a (we can also call them a elements).
ID Selector ( #i )
Also something everyone knows but rarely uses. Used to target a single element usually. Selects the element whose id is i.
Multiclass Selector ( .a.b )
Selects all the elements that have both a and b class names.
Child Combinator ( a > b )
Selects all b elements that are directly present (immediate children) inside a elements.
Descendant Combinator ( a b )
Selects all b elements that are anywhere inside a elements, not just direct children.
Adjacent Sibling Combinator ( a + b )
Used to select all b elements that are immediately next to a elements on the same level.
General Sibling Combinator ( a ~ b )
Selects all b elements that occur anywhere after a elements, no matter the level or position.
Tag + Class Selector ( t.a )
Select all the elements that have tag t and class a.
Attribute Selector ( a[x=y] )
Select all a elements that have the x attribute set to y.
That’s all for today. On the never-ending journey of struggling with CSS, hope this lessens the hassle a little bit.
