Title Text
#15 CSS family
Parent
Child
Child
Siblings
Parent - child relations
Select all children
Select only direct children
First child
Last child
Only child
nth selectors
:nth-child()
"selects one or more elements based on their source order, according to a formula." - CSS tricks
odd vs even
an +/- b
- a is integer
- n is iterator
- + or minus adds or removes a value
- b is an integer
3n + 1, 4n - 1, 2n + 4
n + i
child:nth-child(-2n + 4)
child:nth-child(3n + 3)
child:nth-child(2n)
nth-last-child
.child:nth-last-child(5)
.child:nth-last-child(3n + 2)
:nth-of-type
nth-of-type vs nth-of-child
nth-child
nth-of-type
span:nth-of-type(2)
- select element that is second span among all spans
span:nth-child(2)
- select element that is second of all elements
- select element that is span
Can we select a parent?
has()
Can we select a parent?
has() is not supported yet :(
What about SCSS
No :( We can only select a child through the parent
Sibling relations
- same parent
- subsequent element (next element)
- ~ not necessarily immediate
Sibling relations
tilda selector ~
plus selector +
Can we select a previous sibling?
No :(
- we can't go back in the DOM tree
:not
not a member of family, but can help to select a family member
Specificty battles
Class vs nth child
nth child vs not
Trick with not
global not selector