Beginners' Guide to CSS Selectors
Tags: css, beginners, tutorial, codenewbie
Published: 2022-07-19 12:07:40

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] (https://www.angelinewang.com/how-fast-can-you-learn)