CSS Selector
Posted on October 22nd, 2007.
Anybody who is in web development must be knowing about the css selector .At least they must have tried
p{
background-color:blue;
}
would put the background color of every paragraph to blue color.
But there are very complex selector.One thing to keep in mind is that CSS Selector has to be read from right to left just like Arabic(some thing which is difficult to understand)
for eg if you have a selector
E F -> This matches all F elements which is a descendant of E.I say descendant not child because F can also be the grandchild and still the selector would work.so the space indicates the descendant. If you wanted to choose the F elements which are child of E then your selector should be
E > F .
To choose the first-child use E:first-child .So you have to read this as first-child of E.
To choose the element based on links(visited/not visited).
E:link -> for unvisted link Element .
E:visited -> visited link Element .
E:active,E:hover,E:focus ->few other ways of choosing the element E when some action is happening on the element.
E + F ->To match all F element which are succeeding sibling of Element E.
Now to attribues.Choose elements based on attributes.
E[foo] -> choose all Element E which has a attribute foo.Here you cannot read it as element foo because anything between square brackets are supposed to be attributes of an element and there is no white space between them .so they have to be read together.so you would read it as element E with attribute foo.So it should be read as choose all E with attribute foo.
we can get granular here.E[foo=”gee”] .Choose all E elements which has attribute foo whose value is gee.
if the attribute has multiple values which are separated by space then you can say
E[foo~=”gee”].this would choose any E with attribute foo which contains gee as one of the values.
when the attributes values are separated by hypen then use | instead of tilda
E[foo| = “gee”].
I forgot about the universal selector.this is the thing you will be using most of time.If you know there is an attribute out there in some elements and you want choose all those which have it.
*[foo] -> gives any element which has an attribute foo.There is one more thing about the universal selector.since it is universal you can omit it.so
to choose all elements with foo attribute [foo] is equivalent of *[foo]
to choose all elements with foo attribute with the value gee [foo=”gee”] is equivalent of *[foo=”gee”].
to choose all elements with a class error.error is equivalent of *.error .
Now let us get dirty.I mean let us try something practical
div * p –> you read it the way I told you .
choose all p which are descendant of any element which is a descendant of div.so it is essentially div’s grand child.great grand child , descendant .let us try one more.
div p *[href] -> there is no white space between * and [ so it should be read as choose all element which has href as an attribute which is a child of p which is a child of div.good.
now the child selector. >
body ol>li p . choose all P which are descendant of li which is a child of ol which is descendant of body.
and siblings.
E + F
choose any F element which is adjacent sibling of E (both element should be from same parents and E should be preceding F).You can get granular here
E.warning + F choose F element which is adjacent sibiling of E with the class warning .
attribute selector : [].
if you have to select based on 2 attributes .then it is ok.
E[foo=”gee”][boo=”hee”] -> chooses all E with the attribute foo and boo with thier values being “gee” and “hee”. if you have more than one value or a value separated by space or hypen in attributes values then you can use tilda ~ or the |
E[foo~=”gee”] would match Element E with attribute foo=”gee bee”.and for hypens
E[lang| = “en”] would match Element E with attribue lang=”en-US” or any that begins with en.
Pseudoclasses :
Quoted from website…The :first-child pseudo-class E:first-child Matches element E when E is the first child of its parent.
div > p:first-child { background-color:red}
would match the p if it is the first child of div.The link pseudo-classes selector are link,visted.
a.external:link would match all a’s with external class and not a visited link
and then there are this dynamic selector or selector which get activated on action.hover,focus,active.and we can combine them like this.
a:focus:hover which select an a element when it is focus(you have used you keyboard/cursor to focus on that a) and mouse is hovering on that a.
first-line similar to first-child.
p:first-line {text-transform:upper-case }you can apply a few other like font properties, color property, background properties, ‘word-spacing’, ‘letter-spacing’, ‘text-decoration’, ‘vertical-align’, ‘text-transform’, ‘line-height’.
then there is p:first-letter .this is mostly used for making the first letter of paragraph big and covering 2 lines .for this you can use p:first-letter{ font-size:200% float:left}
Now let us come our favorite the class and DIV.
DIV.error -> This means choose any DIV which has an error class.This can be written as
DIV[class~=”error”].
if you wanted to select all element with error class you can say
*.error or .error would pick every element with the class error.
or if you wanted to be specific then H1.error would all H1 with error class.
if you wanted to match multiple classes then H1.warning.error would match all H1 which have both error and warning.for < h1 class=”error warning “>Heading</h1> this would match .
not <h1 class=”error info”>heading</h1>
And finally to apply certain setting for multiple elements at the same time .They can be grouped and the separation is ‘,’.for eg.
h1,h2{
background-color:blue
}
Ofcourse how can we forget our ID when I am speaking about class.
DIV#id1 -> choose any DIV with an ID id1.
h1#id1{
background-color:blue
}
(this is my favorite css.becoz the blue color strikes you on your face.You know your stuff is working! And this cooolblue signing off.)
