CSS Basics (Part5) — Advanced Selectors

Today we look at some advanced selectors.

A lot of what we cover is building upon the previous two videos where we discus basic selectors, and then properties and values. If you need too, check those out now:

Basic Selectors: http://youtu.be/emMO3iCpvrc
Properties and Values: http://youtu.be/4LtwZQ5jxic



=========================
Basic Selectors

tag | a
class | .container
id | #main-list



========================
Selector stacking

a, strong {
color: red;
}


========================
All Selector

* {
margin: 0;
}



========================
Descendant Selector

li a {
color: red;
}

li li a {
color: red;
}




========================
Direct Descendant Selector

( youtube doesn't allow brackets in the description. )

.container (greater-than) ul {
border: 4px solid red;
}



========================
Adjacent Selector

ul + p {
color: red;
}



========================
Sibling Combinator

ul ~ p {
color: red;
}



========================
Pseudo Classes

a:hover { text-decoration: none; }
textarea:focus {border-color: blue}


========================
Put it together...

.peeka:hover + .boo {
display: block;
}



========================
nth selector

p:first-child
p:last-of-type
p:nth-child(3)
p:nth-child(odd)
p:nth-child(3n)




YAY!!!!!