Oocss & progressive css3 selectors

OOCSS &
Progressive CSS3
Selectors

By: Daniel Sternlicht http://www.danielsternlicht.com

CSS Selectors
All over again…

Element

p{
text-align: center;
}

a{
text-decoration: underline;
color: blue;
}

#ID

#wrapper {
color: #fff;
}

.Class

.box {
color: #fff;
}

* All
*{
color: #fff;
}

div * {
color: #fff;
}

Child Selector

.box p {
color: #fff;
}
.box div ul li p span.error {
background: red;
padding: 5px;
}

Direct > Children

ul li {
color: #fff;
}
ul > li {
color: #fff;
}

Adjacent + Selector

ul + p {
color: #fff;
}

Select the first “p” after each “ul”

Sibling ~ Selector

ul ~ p {
color: #fff;
}
ul + p {
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;
}

: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) {
color: #fff;
}
ul > li:nth-child(6n) {
color: #fff;
}

:nth-last-child(n)

ul > li:nth-last-child(3) {
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) {
padding: 5px;
}

:first-child

ul li:first-child {
padding: 5px;
}
ul li:nth-child(1) {
padding: 5px;
}

:last-child

ul li:last-child {
padding: 5px;
}
ul li:nth-last-child(1) {
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;
}

Purpose

Code Reuse Shrinks CSS Files Faster Webapps

#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

<header> Header

Header content

</header>

<div id="wrapper">

Main content
Content
</div>

<footer>

Footer content

</footer>
Footer

header {
width: 960px;
margin: 0px auto;
padding: 10px;
border-bottom: 1px solid #c7c7c7;
}
.globalWidth {
#wrapper { width: 960px;
width: 960px; margin: 0px auto;
margin: 0px auto; padding: 10px;
padding: 10px; }
Background: red;
}

footer {
width: 960px;
margin: 0px auto;
padding: 10px;
min-height: 10px;
}

ID 2 Class

• 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

Oocss & progressive css3 selectors

More Related Content

Viewers also liked

Similar to Oocss & progressive css3 selectors

Recently uploaded

Oocss & progressive css3 selectors