OOCSS &

CSS Selectors

@dsternlicht

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

Principles

Layout

Skin

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