CSS Selectors

Introduction to CSS Selectors at March Web Design Meetup

Transcript

1. CSS Selectors Samnang Chhun March Web Design Meetup
2. Contents What’s CSS? What’s CSS Selector? Different Types of CSS Selectors CSS Specificity Best Practices Pre-processors
3. What’s CSS? “Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. ” http://en.wikipedia.org/wiki/Cascading_Style_Sheets
6. CSS Selectors “In CSS, selectors are patterns used to select the element(s) you want to style. ” http://www.w3schools.com/cssref/css_selectors.asp
7. CSS Selectors Universal Selector Element Type Selector Class Selector ID Selector Attribute Selector Selector Grouping Combinators Pseudo-classes Pseudo-elements
8. Universal Selector * { ! -moz-box-sizing: border-box; ! -webkit-box-sizing: border-box; ! -moz-box-sizing: border-box; } http://css-tricks.com/things-it-might-be-funuseful-to-try-the-universal-selector-on/
9. Element Type Selector body { padding: 0; margin: 0; background: #ffffff; } p { background: yellow; }
10. Class Selector .intro { background-color: yellow; } p.error { background-color: red; }
11. ID Selector #first-name { color: green; } ul#navigation { display: inline-block; }
12. Attribute Selector input[type="submit"] { color: green; } a[alt~=flower] { background-color: yellow; } /* en, en-us, en-* */ p[lang|=en] { background-color: yellow; } a[href^=http:] { background-color: green; } a[src$=.png] { background-color: blue; } a[href*=”example.com”] { background-color: red; }
13. Selector Grouping #foo td, th { color: blue; } /* Equivalent to */ #foo td { color: blue; } th { color: blue; }
14. Combinators /* Descendant Selector */ ul.nav li { list-style: none; } /* Child Selector */ ul>li { list-style-type: disc; } /* Adjacent Sibling */ h2+p { background-color: yellow; } /* General Sibling Selector */ h2~p { background-color: yellow; }
15. Pseudo-classes a:visited, a:hover { text-decoration: underline; } li:first-child { color: green; } tr:nth-child(2n+1) { color: blue; } tr:nth-child(odd) { /* same match */ color: blue; } tr:nth-child(1) { color: blue; } tr:first-child { /* same match */ color: blue; } http://reference.sitepoint.com/css/css3psuedoclasses
16. Pseudo-elements p:first-letter { font-size: 1.75em; } p:first-line { color: green; } #breadcrumbs:before { content: "You are here:"; margin-right: 0.5em; } span.centimeters:after { content: "cm"; color: #cccccc; }
17. CSS Specificity Who is the winner?
18. CSS Specificity http://specificity.keegan.st/
19. Avoid a universal key selector. Make your rules as specific as possible. Remove redundant qualifiers. Avoid using descendant selectors, especially those that specify redundant ancestors. Use class selectors instead of descendant selectors. Best Practices https://developers.google.com/speed/docs/best-practices/rendering https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
20. SASS (SCSS) Less Stylus Pre-processors
21. Thanks @samnangchhun samnang.chhun@gmail.com