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

Thank You

Smashing CSS: Professional Techniques

for Modern Layout by Eric Meyer

Selectors

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

Specificity

• Who will win?HTML CSS

<h1 id="title">Chuck ipsum</h1><p>Chuck Norris' tears cure cancer. Too bad he has never cried.</p>

h1 { color: red; }h1#title { color: green; }

Output

Chuck ipsumChuck Norris' tears cure cancer. Too bad he has never cried.

Specificity

• Green• 0,1,0,0 versus 0,0,0,1

HTML CSS

<h1 id="title">Chuck ipsum</h1><p>Chuck Norris' tears cure cancer. Too bad he has never cried.</p>

h1 { color: red; }h1#title { color: green; }

Output

Chuck ipsumChuck Norris' tears cure cancer. Too bad he has never cried.

Specificity

• 0,0,0,1 vs. 0,0,0,2 vs. 0,0,0,3

“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

HTML CSS

<p>Chuck Norris <span>is</span> a man of few words. Chuck Norris <span>is <i>not</i></span> a man of few roundhouse kicks to the face.</p>

p { color: red; }p span { color: green; }p span i { color: blue; }

Output

Chuck Norris is a man of few words. Chuck Norris is not a man of few roundhouse kicks to the face.

Specificity

• They can build on each otherHTML CSS

<h1 id="title" class="green">Chuck ipsum</h1><p>Chuck Norris does not use spell check. If he happens to misspell a word, Oxford will simply change the actual spelling of it.</p>

h1 { font-weight: bold; }h1#title { font-size: 2em; }.green { color: green; }

Output

Chuck ipsumChuck Norris does not use spell check. If he happens to misspell a word, Oxford will simply change the actual spelling of it.

Specificity

• !important

“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

HTML CSS

<h1 id="title">Chuck ipsum</h1><p>When Chuck Norris had surgery, the anesthesia was applied to the doctors.</p>

h1 { color: red !important; }h1#title { color: green; }

Output

Chuck ipsumWhen Chuck Norris had surgery, the anesthesia was applied to the doctors.

H1 # .

• Element name• # for ID (there can be only one per page)• . for class (as many as you want)• Multi-classes

HTML CSS

<p>Chuck Norris counted to infinity - <span class="red italic">twice</span>.</p>

.red { color: red; }

.italic { font-style: italic; }

Output

Chuck Norris counted to infinity - twice.

*

• Universal selector• Not wild card (H* does not work)

HTML CSS

<p>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>.</p>

p * { color: red; }

Output

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.

[ ]

• Attribute selectionHTML CSS

<p>The <a href="http://greatwall-of-china.com">Great Wall of China</a> was originally created to keep <a href="chuck.htm">Chuck Norris</a> out. It failed miserably.</p>

a[href] { background: url("data:image…") no-repeat scroll right center transparent; padding-right: 13px;}

Output

The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably.

[=""]

• Attribute selection with criteria• Exact match

HTML CSS

<p>The <a href="http://greatwall-of-china.com">Great Wall of China</a> was originally created to keep <a href="chuck.htm">Chuck Norris</a> out. It failed miserably.</p>

a[href="http://greatwall-of-china.com"] { background: url("data:image…") no-repeat scroll right center transparent; padding-right: 13px;}

Output

The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably.

[*=""]

• Attribute selection with wild card criteria• Contains (*="http" not ="http*")

HTML CSS

<p>The <a href="http://greatwall-of-china.com">Great Wall of China</a> was originally created to keep <a href="chuck.htm">Chuck Norris</a> out. It failed miserably.</p>

a[href*="http"] { background: url("data:image…") no-repeat scroll right center transparent; padding-right: 13px;}

Output

The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably.

[^=""]

• Attribute selection with starting lettersHTML CSS

<p>The <a href="http://greatwall-of-china.com">Great Wall of China</a> was originally created to keep <a href="chuck.htm">Chuck Norris</a> out. It failed miserably.</p>

a[href^="http"] { background: url("data:image…") no-repeat scroll right center transparent; padding-right: 13px;}

Output

The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably.

[$=""]

• Attribute selection with ending lettersHTML CSS

<p>The <a href="http://greatwall-of-china.com">Great Wall of China</a> was originally created to keep <a href="chuck.htm">Chuck Norris</a> out. It failed miserably.</p>

a[href$=".com"] { background: url("data:image…") no-repeat scroll right center transparent; padding-right: 13px;}

Output

The Great Wall of China was originally created to keep Chuck Norris out. It failed miserably.

>

• Child selectionHTML CSS

<div><p>Although it is not common knowledge, there are actually three sides to the Force:</p><ol> <li>the light side</li> <li>the dark side</li> <li>and Chuck Norris</li></ol></div>

div li { color: red; }div > li { color: green; }

Output

Although it is not common knowledge, there are actually three sides to the Force: the light sidethe dark sideand Chuck Norris

+

• Immediate child selectionHTML CSS

<div><p>Although it is not common knowledge, there are actually three sides to the Force:</p><ol> <li>the light side</li> <li>the dark side</li></ol><ol> <li>and Chuck Norris</li></ol></div>

p + ol { color: red; }

Output

Although it is not common knowledge, there are actually three sides to the Force: the light sidethe dark sideand Chuck Norris

~

• Sibling selectionHTML CSS

<div><p>Although it is not common knowledge, there are actually three sides to the Force:</p><ol> <li>the light side</li> <li>the dark side</li></ol><ol> <li>and Chuck Norris</li></ol></div>

p ~ ol { color: red; }

Output

Although it is not common knowledge, there are actually three sides to the Force: the light sidethe dark sideand Chuck Norris

:

• Pseudo ElementsCSS 2.1

Pseudo-classesCSS 2.1

Pseudo-elementsCSS 3

Pseudo-classes

:link:visited:hover:focus:active:first-child:lang()

::first-line ::first-letter ::before ::after

:target :root :nth-child() :nth-of-type() :nth-last-of-type() :first-of-type

:last-of-type :only-of-type :only-child :last-child :empty :not() :enabled :disabled :checked

Pseudo ElementsHTML CSS

<table> <tr> <th>Name</th> <th>Super Power</th> </tr> <tr> <td>Chuck Norris</td> <td>roundhouse kick</td> </tr> <tr> <td>MC Hammer</td> <td>parachute pants</td> </tr> <tr> <td>Mister Miyagi</td> <td>waxing fools</td> </tr></table>

td, th { border: 1px black solid; padding: 5px; }th { background-color: black; color: white; }tr:nth-child(odd) td { background-color: gray; color: white; }

Output

ConnectStewShack.com

@ StewShackfacebook.com/ StewShack

linkedin.com/in/ StewShack