CSS Selectors Samnang Chhun March Web Design Meetup 

Contents What’s CSS? What’s CSS Selector? Different Types of CSS Selectors CSS Specificity Best Practices Pre-processors 

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 

No content

No content

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 

CSS Selectors Universal Selector Element Type Selector Class Selector ID Selector Attribute Selector Selector Grouping Combinators Pseudo-classes Pseudo-elements 

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/ 

Element Type Selector body { padding: 0; margin: 0; background: #ffffff; } p { background: yellow; } 

Class Selector .intro { background-color: yellow; } p.error { background-color: red; } 

ID Selector #first-name { color: green; } ul#navigation { display: inline-block; } 

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; } 

Selector Grouping #foo td, th { color: blue; } /* Equivalent to */ #foo td { color: blue; } th { color: blue; } 

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; } 

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 

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; } 

CSS Specificity Who is the winner? 

CSS Specificity http://specificity.keegan.st/ 

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 

SASS (SCSS) Less Stylus Pre-processors 

Thanks @samnangchhun [email protected]