Beginners' Guide to CSS Selectors

For my very first dev.to post, here are the CSS Selectors compiled in a form I found most digestible :)

My content will be all about laying the crucial foundation upon which boundless software knowledge will be built. I'm beyond excited to share this journey with you!

And I've sprinkled some questions throughout; if you have any answers, it'd be a blessing <3

Part 1 Type Selectors

Selects - Element by Type of Tag
ie div = <div>, p = <p>

1.1 Pseudo-selectors

Selects - 1 Specific Part of an Element
--> Scope - Mostly Singular, but can be Multiple

Syntax - A Keyword added to a Selector
= All Pseudo-selectors come w/ Exact Wording

1.1.1 First of Type

Selects - 1st Type X Element
Targets - 1 Type X Element, or 1 Type X Element that is Direct Children of each Element Y

Syntax - ":first-of-type"

ie span:first-of-type
= 1st <span> of Any Element
ie p span:first-of-type
= 1st <span> of any <p>s

1.1.2 Nth of Type

Selects - The Ath Type X Element
Targets - 1 Type X Element occurring the Ath time on a document
--> Scope - Singular || Multiple
Evaluates - Type && ((Order || Even/Odd) || Formula)

~ Questions
When used w/ a Parent, does this pertain to only Direct Children?
When used w/o a Parent, does this pertain to only top-level elements?
Can this pseudo-selector be used independent of a selector? ~

Syntax Varieties
":nth-of-type(A)"
ie div:nth-of-type(2)
= 2nd <div> occurrence

":nth-of-type(even)"
ie .example:nth-of-type(odd)
= All odd-numbered class="example" occurrences

":nth-of-type(An)"
= Every Ath Occurrence of Element X
ie span.nth-of-type(4n)
= Every 4th <span> occurence

":nth-of-type(An+B)"
= Counting from the Bth (inclusive) Occurrence, Every Ath Occurrence of Element X

ie span.nth-of-type(6n+2)
= Counting from the 2nd (inclusive) <span> occurrence, every 6th <span> occurrence

1.1.3 Only of Type

Selects - Element X if it is the only Element X Child w/in an Element Y Parent
Targets - All Element Ys Parents w/ Only 1 Child that is an Element X
--> Scope: Singular Selection w/in each Parent

Syntax - ":only-of-type"

~ Question
Will using this pseudo-selector independent of a selector select all uniquely used element types? ~

p span:only-of-type
= 1 <span> Child of any <p> Parent without other <span> Children

1.1.4 Last of Type

Selects - Final Type X Element w/in any Element Y
Targets - 1 Type X Element, or 1 Type X Element that is Direct Children of each Element Y
--> Scope - Singular Selection w/in each Parent, but Multiple Selection across document

Syntax - ":last-of-type"

~ Question
Will using this w/o a selector select every Final Element of any Type? ~

ie div:last-of-type
= Final <div> occurrence w/in any Parent Element
ie p span:last-of-type
= Final <span> occurrence w/in any <p> Elements

~ Question
Does the scope of evaluation include any and all elements semantically w/in Element Y? Or only the Direct Children? ~

Part 2 ID Selectors

Selects - Element w/ specific ID (An element can only have 1 ID)

Syntax - #id
ie #cool = id="cool", ul#long = <ul id="long"> (ID + Descendant)

Part 3 Descendant Selectors

Selects - Element inside another element

Syntax - A B
ie p strong = <strong> inside any <p>, #fancy span = <span> inside id="fancy"

Part 4 Class Selectors

Selects - Elements by Class (An element can have multiple classes)

Syntax - .classname
ie .neato = class="neato"
ie #big.wide = id="big"s w/ class="wide" (ID + Class)
ie ul.important = <ul>s w/ class="important" (Type + Class)

Part 5 Comma Combinators

Selects - Combined Selectors

Syntax - A, B

ie p, .fun = <p> && class="fun"

Part 6 Universal Selectors

Selects - Everything

Syntax - *

ie

* {
box-sizing: border-box
}

ie p *
= All Elements inside of a <p> tag
--> Excluding <p> tag itself

Part 7 Sibling Selectors

7.1 Adjacent

Selects - Element directly after Another Element
Targets - 1 Subsequent Sibling of each Sibling
--> Scope - Singular selection in relation to each Sibling, but Multiple across the document

Syntax - A + B
= B element directly after all A elements
= A && B are on the same level/HTML indentation

ie p + .intro
= All class="intro" directly after any <p>
ie div + a
= All <a> directly after any <div>

7.2 General

Selects - Elements after another element
Targets - All existing Element Xs succeeding all existing Element Ys
--> Scope - Multiple selection in relation to each Sibling && Multiple across document

Syntax - A ~ B
= All B elements directly after element A
= A && B have same HTML indentation

General vs Adjacent
= General: All
= Adjacent: 1

Part 8 Child Selectors

Selects - All Element Xs which are Direct Children of Element Ys
Direct Child = 1 HTML indentation
(Descendant Elements = > 1 HTML indentation)
--> Scope - Multiple w/in each Parent

Syntax - A > B
= All Element Bs nested directly in Any Element As

8.1 Pseudo-selectors

8.1.1 First Child

Selects - 1st Child inside Element X
--> Scope - Singular selection w/in each Parent, Multiple across document

Syntax - ":first-child" - Exact wording

ie :first-child = All Elements that are 1st Children
ie p:first-child = All <p>s that are 1st Children
ie div p:first-child = All <p>s that are 1st Children of any <div>s
ie div :first-child = 1st Child (no matter what it is) of any <div>s

8.1.2 Only Child

Selects - Any Element that is an Only Child
Target - All Parents w/ only 1 Child
--> Scope - Singular selection w/in each Parent, Multiple across document

Syntax - ":only-child" - Exact wording

ie span:only-child = All <span>s that are Only Children
ie ul li:only-child = All <li>s that are Only Children of any <ul> Parent

8.1.3 Last Child

Selects - Final Direct Child of Parent
Targets - Parents w/ any number of Children
--> Scope - Singular selection w/in each Parent, Multiple across document

Syntax - ":last-child" - Exact wording
= All Elements that are Final Children

ie span:only-child = All <span>s that are Only Children
ie ul li:only-child = All <li>s that are Only Children of any <ul> Parent

8.1.4 Nth Child

Selects - Ath Child of Parent X
Targets - Parent Xs w/ A number of Children
--> Scope - Singular selection w/in each Parent, Multiple across document

Syntax - ":nth-child(A)" - Exact wording
= All Children in the Ath position w/in a Parent

ie :nth-child(8)
= All 9th Children of any Parent
ie div p:nth-child(2)
= 2nd <p>s that are Direct Children of any <div>s

8.1.5 Nth Last Child

Selects - Counting backwards, Nth Child of Parent X
Targets - Parent Xs w/ A number of Children
--> Scope - Singular selection w/in each Parent, Multiple across document

Syntax - ":nth-last-child(A)" - Exact wording
= Counting backwards, Children in the Ath position w/in a Parent
ie :nth-last-child(2)
= All 2nd-to-last Children of Any Parent

Part 9 Other Pseudo-Selectors

Selects - Elements in specified State
--> Scope - Mostly Multiple, May be Singular

Application - Like applying a Class to a Part of Document
Purpose - Cut excess Classes in HTML && Flexible, Maintainable code

Syntax - :pseudo-class-name
= All Pseudo-selectors come w/ Exact Wording

9.1 Empty

Selects - Elements w/o Children
Targets - All Non-Parents
--> Scope - May be Singular, May be Multiple

~ Question
Are Pseudo-Classes synonymous w/ Pseudo-Selectors?
Does this include the most deeply nested children? Or only top-level elements? ~

Syntax - ":empty"
= All elements w/o children
ie div:empty
= All <div> elements w/o children tags

9.2 Negation

Selects - All Elements !== X
Targets - All Elements, possibly w/in another Element, w/o relevant characteristic
--> Scope - May be Singular, May be Multiple, w/ or not w/in a Parent

Syntax - ":not(X)"
ie :not(#fancy)
= All Elements w/o id="fancy"
ie div:not(first-child)
= All <div>s that are not 1st Children
~ Question
Does this assume the prerequisite that the <div> is a Child? ~
ie :not(.big, .medium)
= All Elements w/o class="big" && w/o class="medium!

Part 10 Attribute Selectors

Selects - All Elements w/ specified Attribute
--> Scope - Depends

Attribute: w/in Opening Tag of Element, after Tag Type (Need not contain a value) Syntax - <span attribute="value">
--> Includes Classes & IDs (identify specified characteristics of selectors)

Syntax - [attribute]
ie a[href] (Type + Attribute)
= All <a> Elements w/ href="anything"
ie [type]
= All Elements w/ type="anything"

10.1 Value

Selects - Elements w/ Specified Attribute && Attribute Value
Targets - Any Type/Class/ID (unless specified) whose opening tag contains relevant Attribute && corresponding Value
--> Scope - Depends

Warning - Case sensitive
= Each Character must match precisely

Syntax - [attribute="value"]
ie input[type="checkbox"]
= All <input>s w/ [type] Attribute && "checkbox" as the Value

10.2 Starts With

Selects - Elements w/ Attribute Value beginning w/ Specified Character(s)
Targets - Any Type/Class/ID (unless specified) whose opening tag contains relevant Attribute && Value w/ relevant beginning
--> Scope - Depends

Syntax - [attribute^="value"]
ie .toy[category^="Swim"]
= Elements w/ class="toy" && [category] Attribute && Value leading w/ "Swim"

10.3 Ends With

Selects - Elements w/ Attribute Value ending w/ Specified Characters
Targets - Any Type/Class/ID (unless specified) whose opening tag contains relevant Attribute && Value w/ relevant ending
--> Scope - Depends

Syntax - [attribute$="value"]
ie img[src$=".jpg"]
= All Elements w/ Type img && [src] Attribute && Attribute Value ending in ".jpg"

10.4 Wildcard

Selects - Elements w/ Attribute w/ Specified Characters anywhere in its Value
Targets - Any Type/Class/ID (unless specified) whose opening tag contains relevant Attribute && Value where relevant Characters exist
--> Scope - Depends

Use Case - Existence of Identifiable Common Patterns in things like class, href, or src Attributes

Syntax - [attribute*="value"]
ie img[src*="/thumbnails/"] (Type + Attribute Wildcard)
= Type img Elements w/ Attribute [src] && Attribute Value containing "/thumbnails/" anywhere
ie [class*="heading"]
= Elements w/ Attribute [class] && Attribute Value containing "heading" anywhere

Thanks for joining me on one of the very first steps in my software development journey, which is all about setting a sturdy foundation for this life-long adventure :)

Until next time,
Angeline

P.S I also write a general blog on my Startup Journey. Feel free to check it out here: Link