The document discusses Object Oriented CSS (OOCSS) and progressive CSS3 selectors. It provides examples of different types of CSS selectors including element, ID, class, child, adjacent, sibling, and pseudo-class selectors. It also demonstrates how to structure CSS using OOCSS principles like separating structure and skin, using class names for containers and components rather than IDs, and applying global styles. The examples aim to illustrate CSS selector types and how to write maintainable and reusable CSS code.

1. OOCSS &
Progressive CSS3
Selectors
By: Daniel Sternlicht http://www.danielsternlicht.com

2. CSS Selectors
All over again…

3. Element
p{
text-align: center;
}
a{
text-decoration: underline;
color: blue;
}

4. #ID
#wrapper {
text-decoration: underline;
color: #fff;
}

5. .Class
.box {
text-decoration: underline;
color: #fff;
}

6. * All
*{
text-decoration: underline;
color: #fff;
}
div * {
text-decoration: underline;
color: #fff;
}

7. Child Selector
.box p {
text-decoration: underline;
color: #fff;
}
.box div ul li p span.error {
background: red;
padding: 5px;
}

8. Direct > Children
ul li {
text-decoration: underline;
color: #fff;
}
ul > li {
text-decoration: underline;
color: #fff;
}

9. Adjacent + Selector
ul + p {
text-decoration: underline;
color: #fff;
}
Select the first “p” after each “ul”

10. Sibling ~ Selector
ul ~ p {
text-decoration: underline;
color: #fff;
}
ul + p {
text-decoration: underline;
color: #fff;
}

11. :hover
a:hover {
text-decoration: undeline;
color: blue;
}

12. ::first-letter
p::first-letter {
font-size: 56px;
color: blue;
}
p::first-line {
font-weight: bold;
color: yellow;
}

13. CSS3
Selectors

14. :checked
input[type=radio]:checked {
border: 1px solid red;
padding: 10px;
}
http://tympanus.net/Tutorials/CSS3Accordion/index.html

15. :not(selector)
*:not(p) {
background: #000;
margin: 0 auto;
}
div:not(#container) {
background: #000;
margin: 0 auto;
}

16. :nth-child(n)
ul > li:nth-child(2) {
text-decoration: underline;
color: #fff;
}
ul > li:nth-child(6n) {
text-decoration: underline;
color: #fff;
}

17. :nth-last-child(n)
ul > li:nth-last-child(3) {
text-decoration: underline;
color: #fff;
}
Start counting from the end

18. :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

19. :nth-last-of-type(n)
ul:nth-last-of-type(2) {
text-shadow: 1px 1px 0 #000;
padding: 5px;
}

20. :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;
}

21. :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;
}

22. :only-child
div p:only-child {
display: none;
}
Select only if the element is the only child

23. :only-of-type
div p:only-of-type {
display: none;
}

24. OOCSS
Object Oriented CSS

25. Say What?!

26. Purpose
Code Reuse Shrinks CSS Files Faster Webapps

27. Principles

28. Structure
Skin

29. #button { .button {
width: 200px; width: 200px;
height: 50px; height: 50px;
padding: 10px; }
border: solid 1px #ccc;
background: red; .box {
box-shadow: 2px 2px 5px #000; width: 400px;
} overflow: hidden;
}
#box {
width: 400px; .widget {
overflow: hidden; width: 500px;
border: solid 1px #ccc; min-height: 200px;
Background: red; overflow: auto;
box-shadow: 2px 2px 5px #000; }
}
.skin {
#widget { border: solid 1px #ccc;
width: 500px; background: red;
min-height: 200px; box-shadow: 2px 2px 5px #000;
overflow: auto; }
border: solid 1px #ccc;
background: red;
box-shadow: 2px 2px 5px #000;
}
ID 2 Class

30. Content
Containers

31. <header> Header
Header content
</header>
<div id="wrapper">
Main content
Content
</div>
<footer>
Footer content
</footer>
Footer

32. header {
width: 960px;
margin: 0px auto;
padding: 10px;
border-bottom: 1px solid #c7c7c7;
box-shadow: 2px 2px 5px #000;
}
.globalWidth {
#wrapper { width: 960px;
width: 960px; margin: 0px auto;
margin: 0px auto; padding: 10px;
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

33. Guidelines

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

35. Why?

36. Faster
Websites

37. Speed

38. Maintainable
Stylesheets

39. OOCSS.com

40. Questions?