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?