Some new features of CSS3
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}
3rd 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”
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
0 comments:
Post a Comment