U's Blog

Attribute selectors

p[name]{color:green}

Every paragraph that has a name attribute will be colored with green

p[name=”para”]{color:red}

Every paragraph which has the name “para” will be colored with red

Regular expressions

p[name^=”x”]{color:red}

Every paragraph that has “x” at the beginning of its name will be colored red.

p[name$=”x”]{color:green}

Name ends with “x”

p[name*=”x”]{color:red}

If name has “x” anywhere color will be red

Sudo Classes

p:nth-child(3){color:green}

3^rd child element of the type p will be colored green.

p:nth-child(odd){color:red}

Every odd occurrences of the child element of p will be colored red.

p:nth-child(even){color:green}

Every even occurrences of the child element of p will be colored green.

p:nth-child(2n+1){color:orange}

Go figure… n : 0 to inf , affects to 1,3,5,7,9 like that odds

Sudo negation classes

Assume that color red has been assign to all the elements in a html document as in the following example

color:red

}

Negation class will be like this….

:not(.para){

color:green

}

This statement says that every element which is not belongs to the class “para” will be colored green

Grater than sign(>)

div>p{color:red}

Color p elements that has div element as a parent (do not works for a grandparents)

Positive sign(+)

p.para1+p{color:red}

paragraph that immediately after a paragraph of class “para1” will be colored red (note: both paragraphs has to share the same parent)

~ sign

p.para1~p{color:red}

Almost like the + operator, in this case paragraph must not be immediately after the paragraph of class “para1”

Author Info