OOCSS &

CSS Selectors

CSS Selectors

For childrens...

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


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


// Too long..
.box div ul li a .error {
    color: red;
}


// This is better..
.box .error {
    color: red;
}

Direct child


ul li { 
    text-decoration: underline; 
    color: #fff; 
}


ul > li { 
    text-decoration: underline; 
    color: #fff; 
}

Adjacent +


// Select the first "p" after each "ul"
ul + p { 
    text-decoration: underline; 
    color: #fff; 
}

Sibling ~


// Select all "p" after each "ul"
ul ~ p { 
    text-decoration: underline; 
    color: #fff; 
}


// Select only the first "p" after each "ul"
ul + p { 
    text-decoration: underline; 
    color: #fff; 
}

:hover


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

::first-letter


p::first-letter {
    font-size: 56px;
    color: blue;
}

p::first-line {
    font-weight: bold;
    color: yellow;
}

CSS3 Selectors

For pros...

:checked


input[type=radio]:checked {
    border: 1px solid red;
    padding: 10px;
}

http://tympanus.net/Tutorials/CSS3Accordion/index2.html

:not()


*:not(p) {
    background: black;
}

div:not(.box) {
    background: red;
}

:nth-child(n)


ul > li:nth-child(2) {
    color: red;
}

ul > li:nth-child(3n) {
    background: yellow;
}

:nth-last-child(n)


// Start counting from the end
ul > li:nth-last-child(2) {
    color: red;
}

:first-child, :last-child


// Select only the first "li"
ul li:first-child {
    color: red;
}

// Select only the last "li"
ul li:last-child {
    color: red;
}

:only-child


// Select if the element is the only child
div p:only-child {
    color: red;
}

OOCSS

Object Oriented CSS

Purpose

Code reuse

Shrink CSS files

Faster apps

Principles

Layout

Skin

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

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

Guidelines

Avoid IDs as styling hooks

Avoid attaching classes to element in your stylesheet (f.e: p.error)

Don't ever use !important

Use / write your own CSS grids

Test your CSS code with CSS lint

Questions