CSS Selectors!!
Peace upon You my fellow CSS developers.
I will cover today the different CSS selectors. First let’s talk about the parts that make up a style sheet. Style sheets consist of a selector and a declaration block. A single declaration block would be made of a single or multiple pair of properties and values. For example the following statement describes a style sheet; that consist of a declaration block with a single pair of property and value.
This statement instructs the browser to display the text of any paragraph in the XHTML document in the color pink.
CSS selectors are classified into the following:
TAG Selector:
This type of CSS selector targets a specific XHTML tag <body>, <p>, <h1>, <div> €¦ etc. For example:
1 2 3 | P { color: #FF6699; border: 1px solid #FF6699} h1 { color: #BB2200; font-family: Arial} div { background-color: gray;} |
Class Selector:
This type of selector targets any tag or XHTML element that has a special XHTML attribute (class). The value of the class attribute, which is also the class name, is the target of the CSS style.
The following examples demonstrate this.
In the XHTML document; suppose your code is something like the following:
<h1>My Header</h1>
Your CSS style should be similar to the following for the above XHTML code:
1 2 3 4 | .special-heading { color: white; background-color: black; } |
When targeting the value in the class name; we prefix the class name with a period; in this above case .special-heading. I am guessing you guys want to see an example to believe me. Ok the below is the XHTML code from index2.html file; for the above mentioned topic.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <h1 class="special-heading">My Header</h1> <p class="note">This is a paragraph. And it should be a very long paragraph. I will repeat the lines to make even longer. This is a paragraph. And it should be a very long paragraph. I will repeat the lines to make even longer. This is a paragraph. And it should be a very long paragraph. I will repeat the lines to make even longer. This is a paragraph. And it should be a very long paragraph. I will repeat the lines to make even longer.</p> <div id="wrapper"> <h1 id="top-header">Top Header</h1> A short paragraph Another short paragraph with a <span id="boldy">Special</span> tag that has an ID </div> |
And the related CSS code in the style2.css is as follows:
1 2 3 4 5 6 7 8 9 10 | .special-heading { color: white; background-color: black; } .note { line-height: 25px; color: green; border: 2px solid lightgreen; } |
Your page should be similar to the below image. Seeing is believing!!
ID Selector:
This type of selector targets a specific XHTML element. That is an element with a defined ID. For example the following XHTML codes define three tags, each with a specific ID.
1 2 3 4 5 6 7 | <div id="wrapper"> <h1 id="top-header">Top Header</h1> A short paragraph Another short paragraph with a <span id="boldy">Special</span> tag that has an ID </div> |
The accompanying CSS code would be similar to the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #wrapper { background-color: gray; margin: 30px; } #top-header { color: white; background-color: black; } #boldy { font-weight: bold; color: red; } |
Your page should look like the below image; after adding the above mentioned statements to your index2.html and style2.css, respectively:
Descendent Selector:
A group selector targets specific tags or elements when they appear inside other tags or elements. For example if you have a paragraph that is marked with the <p> tag in your XHTML document; and you also have a <strong> tag within this paragraph, then you can target the <strong> tag as follows:
<p>This is a short paragraph. <strong>Yes it is</strong>.</p>
The CSS style to target the <strong> would be:
1 2 3 | p strong { color: red; } |
This statement will affect any <strong> tag that exists within any <p> tag.
Group Selector:
A group selector targets many different tags and elements with the same formatting. For example to apply a formatting to the <h1>, <h2>, <p> and also any tag or element that is identified by a class name or an ID. The following example demonstrates this behavior. In fact this combines all the previously mentioned selectors; including the descendent selector:
1 2 3 4 | h1, h2, p, div, .note, #special-header, p strong { color: white; background-color: black; } |
If you wish to target all the elements in your XHTML document; then you can type all the tags separated by comma in your style sheet. Like this:
h1, h2, h3, h4, h5, h6, a, ul, li, p, strong, blah blah blah { color: blue; }.
Hey isn€™t there an easy way to do this. Ok, there is a shorter and more efficient way to achieve the same result. And that is by using the universal selector *. The statement above can be re-written like this:
* { color: blue; }
For the link tag <a>; there are special selectors you can use to format how links behave and viewed.
1) a:link formats any link that is not yet visited (not clicked)
2) a:visited formats any link that is already visited (clicked)
3) a:hover formats the link when you hover over it with the mouse pointer (creating roll-over effect)
4) a:active formats the link when it is in the clicking mode and before releasing the mouse (usually hard to detect)
There are other selectors that you can use to format your tags and elements.
Child Selector:
Let€™s you format a child or children of another tag or element; similar to the descendent selector but it is more precise. See the example below:
1 2 3 4 5 6 7 | <h1>First Header</h1> A short paragraph. <div> <h1>Second Paragraph</h1> Another short paragraph, within the DIV tag. </div> |
To target all the h1 tags within this document, we can use the following styles:
body h1 { color: green; }
To target the first <h1> tag within this document; which is a direct child of the <body> tag, we can use the following statement:
body > h1 { color: brown; }
Adjacent Sibling Selector:
You target a tag that is adjacent to another tag using the (+) sign. So to style every <h2> tag that follows a <h1> tag; use the h1 + h2 selector. For example:
1 2 3 4 5 6 7 8 9 10 | <h1>First Header</h1> <h2>First Sub Header</h2> Short Paragraph <h2>Second sub Header</h2> Short Paragrpah <h1>Second Header</h1> <h2>Third Sub Header</h2> Short Paragrpah <h2>Fourth Sub Header</h2> Short Paragrpah |
In the above code, only “First Sub Header” and “Third Sub Header” will be affected by the following style.
h1 + h2 { color: red; font-size: 24px; border-bottom: dashed blue 1px; }
See the image below:
Attribute Selector:
You target specific tags in your XHTML document that have a particular property. For example; if you want to select all images with a title attribute, you will use the following style:
img[title] { border: solid red 1px; padding: 2px; }
The <img> tag in your document would be similar the following:
1 2 3 | <img title="my image" src="image01.jpg" alt="" /> <img title="my second image" src="image02.jpg" alt="" /> <img src="image03.jpg" alt="" /> |
The last image will not be affected. It will not have a red border around it and will not have any padding. The effect of the above style can be seen in the below example.
The Attribute Selector can also include the value of the attribute to be more specific. For example:
img[title="my third image"] { border: dashed blue 1px; padding:5px; }
This will be applied to the third <img> tage that is now defined as follows:
<img title=”my third image” src=”image03.jpg” /> See below:
This covers our topic on CSS selectors. I hope you have enjoyed this tutorial; although it was long. Sorry for that, but I had to cover the basics before starting my more interesting tutorials; which will cover everything from simple formatting to creating stunning web pages using all the different CSS techniques. So stay tuned and see you by God€™s will.
