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
Top comments (0)