css selectors
TRANSCRIPT
Introduction to CSS selectors
@RichardCarter
Introduction to CSS selectors
@RichardCarter
@RichardCarter
CSS selectors:#FUCK>YEAH
@RichardCarter
Element selectors
div {border: green;}
p {color: red}
@RichardCarter
Descendant selectors
ul li {border-bottom:
1px #ccc solid;}
header ul li {border-bottom:
1px #ccc solid;}
header .lego {border-bottom:
1px #ccc solid;}
@RichardCarter
Classes and IDs
<img id=“lego” src=“lego.jpg” alt=“LEGO ftw” />
#lego {display: block;
}
@RichardCarter
Better to use classes: IDs have high specificity
train.jpg simpsons.jpg
<img class=“lego train” src=“train.jpg” alt=“LEGO Trains ftw” />
<img class=“lego simpsons” src=“simpsons.jpg” alt=“LEGO Simpsons ftw” />
.lego {border: 1px red solid;
}.simpsons {
border-color: #09C;}
train.jpg simpsons.jpg
@RichardCarter
Live coding time!(This is @libwella’s fault)
@RichardCarter
Chained selectors
.lego.simpsons {border-color: blue;
}
@RichardCarter
Adjacency selector
h1 + p {color: blue;
}
@RichardCarter
General sibling selectors
p ~ p {color: blue;
}
<p>LEGO</p><p>LEGO</p><div>LEGO</div><p>LEGO</p>
@RichardCarter
Child selector
// target only first-level liul>li {
font-weight: bold;}
@RichardCarter
Attribute selectors
input[style] {
}
// exact matchinput[type=“password”] {
}
// one exact matchinput[class~=“lego”] {
}
// exact match, separated by -p[lang|=“en”] {
}
// all class values starting ‘lego’input[class^=“lego”] {
}
// all class values starting ‘lego’input[class$=“lego”] {
}
// all class values ending ‘lego’input[class*=“lego”] {
}
@RichardCarter
“There is always someone better
than you”~@sebly
Had fun? Learned something?
@RichardCarter
facebook.com/peacockcarter