Css selectors

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> h1 { color: red; }<p> h1#title { color: green; }Chuck Norris tears cure cancer. Too badhe has never cried.</p> Output Chuck ipsum Chuck 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> h1 { color: red; }<p> h1#title { color: green; }Chuck Norris tears cure cancer. Too badhe has never cried.</p> Output Chuck ipsum Chuck 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 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 fewroundhouse 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 thosewhile avoiding all uses of sibling, descendant and child selectors will actuallymake a page perform significantly better in all browsers.”~ David HyattArchitect for Safari and WebKit, also worked on Mozilla, Camino, and Firefox

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 spellcheck. If he happens to misspell a Outputword, Oxford will simply changethe 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.

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 thedoctors. 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

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.

*• Universal selector• Not wild card (H* does not work) HTML CSS<p> p * { color: red; }If you <i>can see</i> Chuck Norris, he cansee you. If you <b>cant see</b> ChuckNorris 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 cant see Chuck Norris you may be only seconds away from death.

[]• 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 Outputfailed miserably.</p> 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> 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.

[*=""]• 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.

[^=""]• 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.

[$=""]• 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.

>• 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

+• 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>

~• 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>

:• 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

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>

Connect StewShack.com @ StewShack facebook.com/ StewShacklinkedin.com/in/ StewShack

Css selectors

by Dan Stewart on Jun 16, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Css selectors Presentation Transcript