Oinam's Blog

Descendant Selectors

I am a big fan of Descendant Selectors and use it rather profusely. It is made up of two or more selectors cascaded by separating them with whitespaces. It helps me to match an element that is the descendant of another element in the document tree.

#myID { }
#myID .myClass { }
.myClass { }

Here in the above code, the attributes defined in the second line will be applied to .myClass elements in the document which is a descendant of the parent ID #myID. Whereas .myClass can be applied to other totally different set of elements that are not descendant of #myID.

div * p

will match only the paragraph elements that are grandchild or later descendant of a div element.

Attribute Selectors

Attribute Selectors allows us to specify rules that match a particular attribute defined in our documents. They can be matched in the following ways;

1. [att] – Match when the element sets the att attribute, whatever the value of the attribute
2. [att=val] – Match when the element’s att attribute value is exactly val
3. [att~=val] – Match when the element’s att attribute value is a space-separated list of words, one of which is exactly val. If this selector is used, the words in the value must not contain spaces (since they are separated by spaces)
4. [att|=val] – Match when the element’s att attribute value is a hyphen-separated list of words, beginning with val. The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches like the lang attribute in HTML

span[class=deprecated] { color: #ccc; text-decoration: line-through; }

Here, the selector matches all span elements whose class attribute has the exact value deprecated.

span[first="you"][second="me"] { font-weight: bold; }

Here, the selector matches all span elements whose first attribute has exactly the value “you” and whose second attribute has exactly the value “me”. Thus, multiple attribute selectors can also be used to refer to several attributes of an element, or even several times the same attribute.

Sometimes, we can combine Descendant and Attribute Selectors; div p *[href]. This will match any element that has the “href” attribute set and is inside a paragraph that is itself inside a div.

Child Selectors

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”.

body > p { font: normal normal normal small/normal Verdana, Helvetica, Arial, sans-serif; }

will set the style of all paragraph elements that are children of the body element.

div ul>li p

combines descendant selectors and child selectors. This will match a paragraph element that is a descendant of an li, the li element must be the child of an ul element, the ul element must be a descendant of a div. Here, we have the freedom to leave that optional whitepsace in “ul>li”.

Adjacent Sibling Selectors

Adjacent sibling selectors are something like FOO + BAR, where BAR is the subject of the selector. The selector matches if FOO and BAR share the same parent in the document tree and FOO immediately precedes BAR. Sometimes, adjacent elements generate formatting objects whose presentation is handled automatically (e.g., collapsing vertical margins between adjacent boxes). The “+” selector helps us to specify additional style to adjacent elements.

h1 + h2 { margin: 0 0 10px 0; }

directs the h2 element immediately following a h1 element to avoid margins but push the bottom margin by 10px.

h1.special + h2 { margin: 10px 0; }

We can also have special requirement in the formatting by adding an attribute selector. Here, this will apply only when h1 has the class=”special”.

This entry was posted on Wednesday, January 4th, 2006 at 1:01 am and is filed under XHTML-CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.