Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | danielsternlicht |
View: | 117 times |
Download: | 0 times |
OOCSS &Progressive CSS3 Selectors
By: Daniel Sternlicht http://www.danielsternlicht.com
CSS SelectorsAll over again…
Element
p { text-align: center;
}
a { text-decoration: underline; color: blue;
}
#ID
#wrapper { text-decoration: underline; color: #fff;
}
.Class
.box { text-decoration: underline; color: #fff;
}
* All
* { text-decoration: underline; color: #fff;
}
div * { text-decoration: underline; color: #fff;
}
Child Selector
.box p { text-decoration: underline; color: #fff;
}
.box div ul li p span.error { background: red; padding: 5px;
}
Direct > Children
ul li { text-decoration: underline; color: #fff;
}
ul > li { text-decoration: underline; color: #fff;
}
Adjacent + Selector
ul + p { text-decoration: underline; color: #fff;
}
Select the first “p” after each “ul”
Sibling ~ Selector
ul ~ p { text-decoration: underline; color: #fff;
}
ul + p { text-decoration: underline; color: #fff;
}
:hover
a:hover { text-decoration: undeline; color: blue;
}
::first-letter
p::first-letter { font-size: 56px; color: blue;
}
p::first-line { font-weight: bold; color: yellow;
}
CSS3Selectors
:checked
input[type=radio]:checked { border: 1px solid red; padding: 10px;
}
http://tympanus.net/Tutorials/CSS3Accordion/index.html
:not(selector)
*:not(p) { background: #000; margin: 0 auto;
}
div:not(#container) { background: #000; margin: 0 auto;
}
:nth-child(n)
ul > li:nth-child(2) { text-decoration: underline; color: #fff;
}
ul > li:nth-child(6n) { text-decoration: underline; color: #fff;
}
:nth-last-child(n)
ul > li:nth-last-child(3) { text-decoration: underline; color: #fff;
}
Start counting from the end
:nth-of-type(n)
div ul:nth-of-type(2) { text-shadow: 1px 1px 0 #000; padding: 5px;
}
Select the second element from a specific type
:nth-last-of-type(n)
ul:nth-last-of-type(2) { text-shadow: 1px 1px 0 #000; padding: 5px;
}
:first-child
ul li:first-child { text-shadow: 1px 1px 0 #000; padding: 5px;
}
ul li:nth-child(1) { text-shadow: 1px 1px 0 #000; padding: 5px;
}
:last-child
ul li:last-child { text-shadow: 1px 1px 0 #000; padding: 5px;
}
ul li:nth-last-child(1) { text-shadow: 1px 1px 0 #000; padding: 5px;
}
:only-child
div p:only-child { display: none;
}
Select only if the element is the only child
:only-of-type
div p:only-of-type { display: none;
}
OOCSSO b j e c t O r i e n t e d C S S
Say What?!
Purpose
Code Reuse Shrinks CSS Files Faster Webapps
Principles
Structure
Skin
.button { width: 200px; height: 50px; }
.box { width: 400px; overflow: hidden; }
.widget { width: 500px; min-height: 200px; overflow: auto; }
.skin { border: solid 1px #ccc; background: red; box-shadow: 2px 2px 5px #000; }
#button { width: 200px; height: 50px; padding: 10px; border: solid 1px #ccc; background: red; box-shadow: 2px 2px 5px #000; }
#box { width: 400px; overflow: hidden; border: solid 1px #ccc;Background: red; box-shadow: 2px 2px 5px #000; }
#widget { width: 500px; min-height: 200px; overflow: auto;border: solid 1px #ccc; background: red; box-shadow: 2px 2px 5px #000; }
ID 2 Class
Content
Containers
<header>
Header content
</header> <div id="wrapper">
Main content
</div> <footer>
Footer content
</footer>
Header
Content
Footer
.globalWidth { width: 960px; margin: 0px auto; padding: 10px; }
header { width: 960px; margin: 0px auto; padding: 10px; border-bottom: 1px solid #c7c7c7;box-shadow: 2px 2px 5px #000; }
#wrapper { width: 960px; margin: 0px auto; padding: 10px; Background: red; box-shadow: 2px 2px 5px #000; }
footer { width: 960px; margin: 0px auto; padding: 10px; min-height: 10px; box-shadow: 2px 2px 5px #000; }
ID 2 Class
Guidelines
• Avoid IDs as styling hooks
• Avoid attaching classes to element in your stylesheet (p.error)
• Don’t ever use !important
• Use / Write your own CSS Grids
• Test your CSS code with CSS Lint
Why?
Faster Websites
Speed
Maintainable Stylesheets
OOCSS.com
Questions?