CSS selectors are used to select and style elements on web pages. Common selectors include element names, IDs, classes, attributes, and pseudo-classes. More complex selectors allow targeting of child elements, siblings, and elements based on attributes. Specificity determines which styles will be applied when multiple selectors target the same element.

1. CSS Selectors
What the ^#.*:()~[]="">+$

2. Thank You
Smashing CSS:
Professional Techniques
for Modern Layout
by Eric Meyer

3. Selectors
• Used to select an element
• Elements
• Pseudo-elements
• By element, ID, class, other
H1 # . ^*:()~[]="">+$

4. Specificity
• Who will win?
HTML CSS
<h1 id="title">Chuck ipsum</h1> h1 { color: red; }
<p> h1#title { color: green; }
Chuck Norris' tears cure cancer. Too bad
he has never cried.
</p> Output
Chuck ipsum
Chuck Norris' tears cure cancer. Too bad he
has never cried.

5. Specificity
• Green
• 0,1,0,0 versus 0,0,0,1
HTML CSS
<h1 id="title">Chuck ipsum</h1> h1 { color: red; }
<p> h1#title { color: green; }
Chuck Norris' tears cure cancer. Too bad
he has never cried.
</p> Output
Chuck ipsum
Chuck Norris' tears cure cancer. Too bad he
has never cried.

6. Specificity
• 0,0,0,1 vs. 0,0,0,2 vs. 0,0,0,3
HTML CSS
<p> p { color: red; }
Chuck Norris <span>is</span> a man p span { color: green; }
of few words. Chuck Norris <span>is p span i { color: blue; }
<i>not</i></span> a man of few
roundhouse kicks to the face. Output
</p> Chuck Norris is a man of few words. Chuck
Norris is not a man of few roundhouse kicks to
the face.
“Decorating your markup with classes and ids and matching purely on those
while avoiding all uses of sibling, descendant and child selectors will actually
make a page perform significantly better in all browsers.”
~ David Hyatt
Architect for Safari and WebKit, also worked on Mozilla, Camino, and Firefox

7. Specificity
• They can build on each other
HTML CSS
<h1 id="title" h1 { font-weight: bold; }
class="green">Chuck ipsum</h1> h1#title { font-size: 2em; }
<p> .green { color: green; }
Chuck Norris does not use spell
check. If he happens to misspell a Output
word, Oxford will simply change
the actual spelling of it.
Chuck ipsum
Chuck Norris does not use spell check. If he
</p>
happens to misspell a word, Oxford will simply
change the actual spelling of it.

8. Specificity
• !important
HTML CSS
<h1 id="title">Chuck ipsum</h1> h1 { color: red !important; }
<p> h1#title { color: green; }
When Chuck Norris had surgery,
the anesthesia was applied to the
doctors. Output
</p> Chuck ipsum
When Chuck Norris had surgery, the anesthesia
was applied to the doctors.
“Even though there are solutions, it is still a massive pain for users, so please,
don’t use ‘!important’ unless you have no other option!”
~ James Padolsey

9. H1 # .
• Element name
• # for ID (there can be only one per page)
• . for class (as many as you want)
• Multi-classes
HTML CSS
<p> .red { color: red; }
Chuck Norris counted to infinity - .italic { font-style: italic; }
<span class="red italic">twice</span>.
</p>
Output
Chuck Norris counted to infinity - twice.

10. *
• Universal selector
• Not wild card (H* does not work)
HTML CSS
<p> p * { color: red; }
If you <i>can see</i> Chuck Norris, he can
see you. If you <b>can't see</b> Chuck
Norris you may be only seconds away from
<a href="death.htm">death</a>. Output
</p> If you can see Chuck Norris, he can see
you. If you can't see Chuck Norris you
may be only seconds away from death.

11. []
• Attribute selection
HTML CSS
<p> a[href] { background: url("data:image…")
The <a href="http://greatwall-of- no-repeat scroll right center transparent;
china.com">Great Wall of China</a> was padding-right: 13px;
originally created to keep <a }
href="chuck.htm">Chuck Norris</a> out. It Output
failed miserably.
</p> The Great Wall of China was originally
created to keep Chuck Norris out. It
failed miserably.

12. [=""]
• Attribute selection with criteria
• Exact match
HTML CSS
<p> a[href="http://greatwall-of-china.com"] {
The <a href="http://greatwall-of- background: url("data:image…") no-
china.com">Great Wall of China</a> was repeat scroll right center transparent;
originally created to keep <a padding-right: 13px;
href="chuck.htm">Chuck Norris</a> out. It }
failed miserably. Output
</p>
The Great Wall of China was originally
created to keep Chuck Norris out. It
failed miserably.

13. [*=""]
• Attribute selection with wild card criteria
• Contains (*="http" not ="http*")
HTML CSS
<p> a[href*="http"] {
The <a href="http://greatwall-of- background: url("data:image…") no-
china.com">Great Wall of China</a> was repeat scroll right center transparent;
originally created to keep <a padding-right: 13px;
href="chuck.htm">Chuck Norris</a> out. It }
failed miserably. Output
</p>
The Great Wall of China was originally
created to keep Chuck Norris out. It
failed miserably.

14. [^=""]
• Attribute selection with starting letters
HTML CSS
<p> a[href^="http"] {
The <a href="http://greatwall-of- background: url("data:image…") no-
china.com">Great Wall of China</a> was repeat scroll right center transparent;
originally created to keep <a padding-right: 13px;
href="chuck.htm">Chuck Norris</a> out. It }
failed miserably. Output
</p>
The Great Wall of China was originally
created to keep Chuck Norris out. It
failed miserably.

15. [$=""]
• Attribute selection with ending letters
HTML CSS
<p> a[href$=".com"] {
The <a href="http://greatwall-of- background: url("data:image…") no-
china.com">Great Wall of China</a> was repeat scroll right center transparent;
originally created to keep <a padding-right: 13px;
href="chuck.htm">Chuck Norris</a> out. It }
failed miserably. Output
</p>
The Great Wall of China was originally
created to keep Chuck Norris out. It
failed miserably.

16. >
• Child selection
HTML CSS
<div> div li { color: red; }
<p> div > li { color: green; }
Although it is not common knowledge,
there are actually three sides to the Force:
</p> Output
<ol> Although it is not common knowledge,
<li>the light side</li> there are actually three sides to the
<li>the dark side</li> Force:
<li>and Chuck Norris</li> the light side
</ol> the dark side
</div> and Chuck Norris

17. +
• Immediate child selection
HTML CSS
<div> p + ol { color: red; }
<p>
Although it is not common knowledge,
there are actually three sides to the Force:
</p> Output
<ol> Although it is not common knowledge,
<li>the light side</li> there are actually three sides to the
<li>the dark side</li> Force:
</ol> the light side
<ol> the dark side
<li>and Chuck Norris</li> and Chuck Norris
</ol>
</div>

18. ~
• Sibling selection
HTML CSS
<div> p ~ ol { color: red; }
<p>
Although it is not common knowledge,
there are actually three sides to the Force:
</p> Output
<ol> Although it is not common knowledge,
<li>the light side</li> there are actually three sides to the
<li>the dark side</li> Force:
</ol> the light side
<ol> the dark side
<li>and Chuck Norris</li> and Chuck Norris
</ol>
</div>

19. :
• Pseudo Elements
CSS 2.1 CSS 2.1 CSS 3
Pseudo-classes Pseudo-elements Pseudo-classes
:link ::first-line :target :last-of-type
:visited ::first-letter :root :only-of-type
:hover ::before :nth-child() :only-child
:focus ::after :nth-of-type() :last-child
:active :nth-last-of-type() :empty
:first-child :first-of-type :not()
:lang() :enabled
:disabled
:checked

20. Pseudo Elements
HTML CSS
<table> td, th { border: 1px black solid; padding:
<tr> 5px; }
<th>Name</th> th { background-color: black; color:
<th>Super Power</th> white; }
</tr> tr:nth-child(odd) td {
<tr> background-color: gray;
<td>Chuck Norris</td> color: white;
<td>roundhouse kick</td> }
</tr>
<tr> Output
<td>MC Hammer</td>
<td>parachute pants</td>
</tr>
<tr>
<td>Mister Miyagi</td>
<td>waxing fools</td>
</tr>
</table>

21. Connect
StewShack.com
@ StewShack
facebook.com/ StewShack
linkedin.com/in/ StewShack