CSS Basics – Advanced CSS Selectors
In one of the previous articles, you have been introduced to basic CSS selectors, class, element and id selectors. You can execute a lot of CSS works with those but they are not the only selectors. There are other selectors that allow you to select elements and style based on more specific rules:
Universal Selectors: These selectors can be used in selecting every element on the page.
Child Selectors: These selectors can be used when you want to select specific elements that are descendants of any other specific elements.
Descendant Selectors: These selectors can be used if you want to select particular elements that are descendants of other specific elements. The elements here are not just limited to direct children but those which are further down the tree as well.
Adjacent Sibling Selectors: To select those elements that follow other specific elements, these selectors are used.
Pseudo-Classes: These comes in handy when you want to style elements not just based on what the elements are but on more esoteric factors such as the stats of links. i.e. you can style the elements depending on deeper factors like being hovered over or link already visited.
Pseudo-Elements: These elements allow styling of specific parts of elements. As for instance, the initial letter of that element. These elements also allow inserting of content before or after specific elements.
As you progress, you will be guided through more complicated selectors. Even though you don’t know anything by now, you don’t have to worry because you will get to know them as you gain more experience in designing and styling web pages. Start off with the three basic selectors and then move on as you gain experience and confidence.
Lets deal a little bit more about the selectors mentioned above.
Universal Selectors
These selectors select every element on a page and apply the styling properties. As for instance, the following rule says that every element on the page will be given a solid 1 pixel black border
* {
border: 1px solid #000000;
}
Attribute Selectors
These selectors allow selecting elements based on attributes they contain. For example, the following selector shows that you can select every img element with an alt attribute.
mg[alt] {
border: 1px solid #000000;
}
By using the above selector, you will be putting a black border around any image that has an alt attribute.
Selecting attributes becomes more useful if you can select them by attribute value instead of just attribute names as given in the example below:
img[src="alert.gif"] {
border: 1px solid #000000;
}
You may think that this is not very useful but it can be useful when it comes to debugging. CSS 3 now introduces three new types of attribute selector that can select based in text strings in attribute values.
Child Selectors
One can use a child selector for selecting specific elements that are children of other specific elements. As for example, the following rule will turn text of strong elements that are children of h3 elements into blue but will cause no effect on other strong elements.
h3 > strong {
color: blue;
}
(Note: Child Selectors are not supported in IE 6 and below)
Descendant Selectors
Similar to child selectors, descendant selectors however only select direct descendants. These selectors select only suitable elements from anywhere in an element hierarchy, not only direct descendants. Look at the following HTML snippet.
hello
In this paragraph I will say
goodbye.
The div element is in this snippet is the parent of all the others. It has two children, em and p. The p element has another single child element, another em.
A child selector can be used to select just the em immediately inside the div as:
div > em {
…
}
But if you use a descendent selector, as give below:
div em {
…
}
Both em elements would be selected.
Adjacent Sibling Selectors
These selectors allow the selection of specific elements that come directly after another specific element. However, the elements are of the same level in the element hierarchy. In the following rule, you will be able to select all p elements that comes immediately after h2 elements but not other p elements.
h2 + p {
…
}
(Note: Adjacent Sibling selectors are not supported in IE 6 and below)
Pseudo-Classes
These classes are used to provide styles to various states of elements. Its most common usage is in styling links states. Examples are given below:
:link – the default state of links.
:visited – links already visited in the browser.
:focus – links that currently have the keyboard cursor within them.
:hover – links that are currently being hovered over by the mouse pointer.
:active – a link that is currently being clicked on.
According to the following rule the default links will be blue. The underlining under the link will disappear when hovered over. In order to make the same effect take place when links are focused via the keyboard, :hover rule is duplicated with :focus. If a link is already visited, the color of the link will turn gray and finally, when a link is active, it is emboldened.
a:link {
color: blue;
}
a:visited {
color: gray;
}
a:hover, a:focus {
text-decoration: none;
}
a:active {
font-weight: bold;
}
Note that the above specified rules should be in the same order. It may not work otherwise. This is because specificity of a rule in a style sheet may override the earlier rules. You will come to know more about it later.
The :focus pseudo-class also comes in handy as a usability aid in forms. For instance, we can highlight the input field that has the active blinking cursor with a rule like given below:
input:focus {
border: 2px solid black;
background color: lightgray;
}
Now, let us have a look at :first-child. This pseudo-class selects any instance of the element that is first child element of its parent. As given in the example below, the rule selects the first list item in any list and makes its text bold.
li:first-child {
font-weight: bold;
}
Last but not the least, lets look at :lang pseudo-class. This class selects elements whose languages have been set to a specified language using the lang attribute. An example is given below.
A paragraph of American text, gee whiz!
Could be selected using the following:
p:lang((en-US) {
…
}
Pseudo-elements
This one has two purposes. The first purpose is:
1. To use them in selecting first letter or the first line of text inside a given element.
2. To easily create a drop cap at the start of every paragraph.
Below are given the rules as example:
p:first-letter {
font-weight: bold;
font-size: 300%
background-color: red;
}
In the above rule, the first letter of every paragraph will now emboldened, will be 300% bigger than the rest of the paragraph, and have a red background.
In order to make the first line of every paragraph bold, we can use the below given rule:
p:first-line {
font-weight: bold;
}
The second use of these elements is to generate content through Cascading Style Sheets which is more complex. We can use the :before or:after pseudo-elements to specify whether a content is to be inserted before or after the element selected. Thereafter, we decide on what is to be inserted. Here is an example of inserting images after every link on that page.
a:after {
content: ” ” url(flower.gif);
}
We can also use the attr() function to insert attribute values of the elements after the element. As for example, we can insert the target of every link in the document within brackets after them as given below:
a:after {
content: “(” attr(href) “)”;
}
Rules like the above are perfect for print style sheets. By print style sheets we meant to say those which we can be written and are automatically applied when a user prints a page.
We can also insert incremented numerical values after repeating elements (like paragraphs or bullets) using the counter() function of which will be explained later.
It is to be noted that all these selectors are not supported in IE 6 and below. Important information shouldn’t be inserted with CSS for that content will be unavailable if a user chooses not to use the style sheet. The bottom line is, CSS is for styling and HTML is for important contents.
