08-24-2007, 08:56 AM
Advanced Selectors
In CSS 2 and 3
Selectors are the way you reference the parts of your HTML documents with the styles you want to have applied to them. CSS2 and CSS3 brought with them a host of new selector specifications, designed to allow greater access to the elements and parts of those elements that make up each and every webpage. These new syntax rules allow greater flexibility and accuracy in defining exactly which parts of your page get styled.
Combinators
_________________________________________________
The advanced combinators allow you to define styles that are based on a more complex rule that will be applied to more specific elements. Originally, it was possible to get to descendant-elements through contextual styles. For instance:
p em {font-size: larger; }
This rule will affect all em elements inside paragraphs. This is very useful, but also relatively simplistic. Combinators allow you to state the required relationship between two elements.
Adjacent Sibling Combinator
_________________________________________________
The adjacency combinator (a plus sign, +) allows you to style an element if it has been directly preceded by another specified element. This comes in very handy when working out margins and such. For instance, you may give your headings large margins so they stand out from normal text, but if two headings come one after the other, you may want to control the margin between them as a special case, like so:
h1, h2 {margin: 3em 0; }
h1 + h2 {margin-top: 1em; }
Child Combinator
_________________________________________________
The child combinator (denoted by the greater-than symbol, >) can be used to combine two elements, and will only be applied if the second element comes directly after the first. It looks like this:
p > em {font-size: larger; }
This will affect all em elements which occur as children of paragraphs, but not those that have another parent element in-between (which would make the em a grand-child or more). In the example below, the first em element would be styled, but the second would not, as it is inside an a element — and therefore not directly below the p element:
<p>
Do <[color=brown]em>not</em> visit <a href="index.html"><em>this</em> page</a>!
</p>[/color]
Universal Selector
_________________________________________________
The universal selector (denoted by a star, * ), affects every element on a page.
* {color: #bb0; }
IE6 supports the universal selector. In most cases it can be omitted as it is implied by inheritance.
The two rules below are equivalent:
* p {text-indent: 2em; }
p {text-indent: 2em; }
However, it does become useful when used in concert with the child combinator, as it can take the place of any element which may occur in between two others, as in:
p > * > em {font-size: larger; }
A rule like this would allow the second em element in our example above to be styled, but not an em which was inside a further element, as in a case like
<p>
Seriously, <[color=brown]strong>do not visit <a href="index.html"><em>this</em> page</a>!</strong>
</p>[/color]
Attribute Selectors
_________________________________________________
CSS2 also allows you to apply styling to an element based on the attributes it has defined in it, or even based on the values of these attributes. Firstly, to select the elements with an attribute defined, you infix the attribute name surrounded by square brackets:
abbr[title] {border-bottom: 1px dashed #0c0; }
This would apply styling to all abbr elements which have the title attribute, whatever its value.
Taking this a step further, you can select an element that has a precise value specified:
a[href="www.chemistryonline.info"] {font-weight: bold; }
This rule will match a link with the exact href of ‘www.chemistryonline.info’. Note that the value is wrapped in double-quotes.
While this could quickly make your CSS file very big and clumsy-looking, it’s undoubtedly a useful power to have at your disposal. This selector comes into its own when you’re styling an XML document, where much of an element’s information may be written in as an attribute value.
There’s also a basic pattern-match selector which can look for a single word in an attribute’s value. If the value is a space-separated list (a sentence, in other words), you can write a rule to look out for certain words.
a[title~="Mail"] {text-decoration: none; }
The operator in use here is a tilde (~) followed by an equals. It would match something like
<p>
Send me <[color=brown]a href="mailto:address@server.com" title="Mail me">email</a>.
</p>[/color]
You can link many attribute selectors into a single rule to find a specific element:
p[align="right"][class="intro"] {line-height: 1.8em; }
Hope you all webmasters find this piece of info very useful.
The credit for this article goes to "Ross Shannon"
Thanx,
Shadab
I would be interested in getting some knowledge on the subject.