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.
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>
Hello, my name is Dan Stewart. My presentation is on CSS Selectors. What the… every symbol on this slide can be used to select an element on a web page using CSS. We are going to be talking about each. Many of you have selected elements using their name, but have you used any of these symbols? Maybe the pound (#), maybe the dot (.).Color theme: http://kuler.adobe.com/#themeID/1931107Titles: R 238 G 145 B 63 #EE913FBlue: R 25 G 80 B 115 #195073Green: R 127 G 140 B 31 #7F8C1FBeige: R 242 G 229 B 189 #F2E5BDTeal: R 159 G 215 B 199 #9FD7C7
I don’t want you to think I came up with all of this on my own. Much of what you will see on these slides came from Eric Meyer’s excellent book, “Smashing CSS”.Buy it today!
Selectors give us a way to… wait for it… select an element on a webpage.An element is an HTML tag, the stuff inside the tag, or the stuff containing the tag.A pseudo element isn’t really an element, it’s a state of an element. For example, hover. You can apply a style to an element when you hover over it. I’ll be showing more examples of pseudo elements and elements later.We can use the name of the element, like H1, the ID with a pound #. Do you call it pound or hash? The class with a dot. Saying dot is shorter than period. And other with other symbols.
Spes-eh-fis-ityIt’s a hard word to say and even harder to understand.Basically it comes down to, who will win?I used JSFiddle.net to test this code. JS fiddle is a great website that allows you to play with HTML, CSS, and JavaScript.So I have some Chuck Norris Lorem Ipsum. http://chuckipsum.com/?p=5&mode=chuckIn the HTML you see I have an H1 element. This element has an ID.Over in the CSS corner I have told the web page to display all H1 elements with red font. Then I say that an H1 element with the ID of title should have a green font.Which one wins? Who says red? Who says green?
Green wins.How can we know which rule will win? Spes-eh-fis-ityMaybe making a little array of numbers will help.The first number represents inline styles. So, you put an inline style, it will win.The second number is the ID. So putting an ID on an element and applying a style… will win.The third is a class, pseudo-class, attribute descriptor.The last is the element.So blanket element rules like all H1’s are red is easily overruled by classes and ID’s.
One more example. All paragraph text should be red. The p tag is an element, so we put a 1 in the last number.A span tag inside a p tag is green. So, we add 1 for the p tag and 1 for the span tag.An i tag in a span tag in a p tag is blue. 1 + 1 + 1 = 3.Can I take a moment to rant about nested element rules?They slow down your webpage and development.We’ve heard the dangers of “classitis” where you put the class attribute on every little thing.Well, these nested selectors are slow and not having classes slows development by adding complexity.Let’s say you don’t want italics inside a span to be blue. You have to create a class to undo the rule. Now your adding classes, not change a style, but to undo a style.That’s the opposite of what adding a class is supposed to do.Say it with me, “classes are ok”.Quote source: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
I’ve talked a lot about how rules override each other, but they can build upon each other too.All H1's should be bolded. The H1 with an ID of title is larger, and the class "green" gets a green font color.
You do have a trump card. It’s the bang important statement. Bang or exclamation point?When should you use it? Never! Ok, when it’s important.This trump card make your CSS break the rules, which is not a good thing.I hate to even bring it up.Quote source: http://james.padolsey.com/usability/dont-use-important/
We've seen selecting an element by its name, ID, and class.The drawback of using ID is that there can only be one per page.I can’t tell you how many times I have had to convert a rule for an ID into a class. You’re better off using classes than ID’s.It’s hard to promise that an element will ever only show up once on a page.You can have multiple classes in an element.This is good because classes can just do one thing instead of having a "red dash italic" rule and a "red dash bold" rule, Just have a red class and an italic class.Just separate them with a space.
The aste-risk or star. I like to say star because it’s easier.The star is referred to as the universal selector. It’s not a wild card. So you can’t do H* and expect to select all the H tags like H1 – H6.It is a wild card for all the children inside an element.In this example my CSS has a rule for p star. This rule selects all the elements in the p tag. No matter what element falls inside a p tag, it will be red.
Square brackets allow you to select an attribute.There are two kinds of anchor tags. Ones with the attribute href takes you too another page, ones with an ID allow you to link from another page to a specific location on a page.I wrote a rule that anchor tags with the attribute href could get a Wikipedia style icon at the end.Now if you look closely, the link to Great Wall of China is external, but the link to Chuck Norris is internal. Only the link to the Great Wall site should have the external link icon, right?So how can we select that?Full CSS Code a[href] { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=") no-repeat scroll right center transparent; padding-right: 13px;}
Inside the square brackets you can create criteria.The problem is, the criteria has to exactly match.So www Great Wall of China dot com won’t match. Even capitalizing the G in Great will cause it to fail.
The star equals acts like a contains statement.So, if the href attribute contains http anywhere, it will match.Again it's not a wild card. So stars equals http works, but not equals http star like you would think.
The carrot means “starts with”.We know that http is the first thing in the URL. So we could use the carrot to find it.
The opposite of the carrot is the dollar sign.The dollar sign means the ending characters.
Putting a space after a selector followed by another selector gets all of the descendants, but not the direct descendants.Putting a greater than symbol gets the direct descendants. Since the LI is a descendant of DIV then it will be red.LI is not a direct descendant of DIV so it will not turn green.
Putting a plus after a selector followed by another selector gets the next sibling.The first OL after the P tag is selected, but the second one is not.
This is a CSS 3 thing, it's a little buggy, but it does select siblings.
Finally we get to pseudo elements.These aren't real elements and classes. They are pseudo elements.
Do you need a table with alternating row colors?You can do that with CSS 3 now.
Thank you for coming. Hopefully you learned something helpful.I would love to connect with you. My website is stew shack dot com. I'm on Twitter, Facebook, Linked In.Thanks