Selectors in Cascading Style Sheets

The indispensable tool  in every web developers portfolio is Cascading Style Sheets (CSS). Once HTML has been used to organize the contents, the presentational brilliance stems from using CSS rules. Syntactically the rules have a selector followed by a declaration containing various properties separated by semicolons:

p {color:blue; font-weight:normal;}

This simple tag selector rule colours all the contents of
tags in the HTML document. Also noted that the property-value combination is defined by separating the property from its value with a colon.  Instead of p we could have used any of the html elements like h1, h2 etc. To apply the rule to a group of elements we simply use a selector with comma separated the elements. For example, if we want to override the h3, h4, h5 and h6 header elements default definition of the browser, we can just use group selector:

h3, h4, h5, h6 {color:black; font-size:1.2em;)

The commonest way of formatting content is to use the class selector in conjunction with <div> block element or <span> inline element.

.myClass {color:black; font-size:1.2em;) class selector has a period prefix. Currently it will apply to any tag which has attribute definition of class="myClass". For example, if we have the following in our document:

<p class="myClass">...</p>
<div class="myClass">...</div>

then the .myClass selector will apply the declaration formatting to both these elements. To just restrict the formatting to
element, we change the selector to p.myClass in our rule.

Along with class, id is another attribute which can be placed on most elements. Indeed, javascript uses id to get the elements. So if we have <p id="myID"> then the hash prefixed selector for this element becomes:

#myID {color:black; font-size:1.2em;)

We also have pseudo-classes and pseudo-elements available as selectors. The anchor pseudo-classes are used to invariably define link interaction with a:link, a:visited, a:hover and a:active selectors. We know that these stages happen with links. Similarly, the first line of a paragraph or a first letter of the paragraph doesn't have a tag but it is easily identifiable pseudo-element so we can have a selectors like:


p:first-letter {color: blue;font-size:1.5em;}


or

p:first-line {color: blue;font-size:1.5em;}

Similarly there are pseudo-elements after and before for auto-generated content. To prefix a paragraph with a class="intro" with 'Thought of the day!' auto-generated content, we have the selector syntax:

p.intro:before {content: "Thought of the day!" }

or to give the text after the paragraph:

p.intro:after {content: "Thought of the day!" }

To style tags within tags we have descendant selector. For example, to highlight emphasis within a paragraph we may use the selector:

h1 strong { color: red; }

Here sub-element <strong> within element <h1> is coloured red. Similarly if we wanted to select the ordered lists which are direct children of body element the syntax is body > ol for the rule. Note the angle bracket is used for the child selector. Or to get to an adjacent sibling we use the plus ('+') sign instead of the angle bracket.

We can also select on the attributes. These selectors allow us to select element which have a certain property. For example to select all the images with title attribute we will have a selector img[title]. Or to just select text boxes in a form we can have the attribute selector

input[type="text"]

There are some further refinements to these selector but the knowledge is acquired by experimentation. The aspects covered are more than adequate.

For a good source for understanding the selectors visit here.

CSS: The Missing Manual is a very useful resource which you should have in your collection.