CSS rule for your selector:

Playing with CSS selectors
(How does it works)

Roger Joahnsson says:
“Among the first things you learn about when you start out with CSS are selectors. Selectors are obviously a fundamental part of CSS, but few developers use them to their full potential. While you can get a lot done with just the type, ID, and class selectors, there are many more.
Learning how to use the full range of CSS selectors available in CSS 2.1 properly can actually help you keep your HTML a lot cleaner.”

I have provided a brazilian portuguese translation for the excellent “CSS 2.1 selectors” article, written by Roger Joansson, where the author explains selectors available in CSS.

Inspired on that translation I decided to provide this PHP-based interactive document where one can play with:

1. type selectors - matches every instance of the element type in the document tree;
2. class selectors - matches elements based on the value of their class attribute;.
3. id selectors - matches elements based on the value of their id attribute;
4. universal selectors - matches all elements in the document;
5. contextual selectors or combined selectors - two or more simple selectors separated by a combinator (“whitepace”, “+”, “>”);
   1. descendant selectors - A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A;
   2. 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 “>”;
   3. adjacent sibling selectors - Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).
6. grouped selectors - several selectors share the same declarations, they may be grouped into a comma-separated list;
7. attribute selectors - match elements which have certain attributes defined in the source document;
8. pseudo-class and pseudo-element selectors - permit formatting based on information that lies outside the document tree.

How does it works

This page is at a glance, self explanatory and you can skip to next section, but for those new to CSS let me continue:

At the right side hand there is a simple sample page (wrapped in a DIV whose ID is #frame) with three sections where the things happen:

1. A Header whose ID is #header
2. A Navigation Bar whose ID is #nav
3. A main section whose ID is #main

The content of that sample page reveals its HTML structure. So, using a CSS selector, you can target an element without looking inside the source code.

The paragraphs were numbered from
¶ #1) to ¶ #12) for reference.

At the top of this left side hand there are two fields forms and a CSS rule field.
The first one labeled "Choose a selector" gives you the option to select a selector and by hitting the OK button see which element(s) it matches, highlighting the bit of content targeted on the sample page.
Try it now and see for yourself.

In the second field form labeled "Type a selector" you can type a selector, a pseudo-class or a pseudo-element trying to target an specific element (bit of content) on the sample page.

Finally, on the CSS rule field will be displayed a default written CSS rule, applied to your chosen/typed selector.

Try it

In this section, I'll put some challenges to my visitors, specially for those new to CSS selectors; such as:

1. Is it possible to target only the first occurence of <span> within the paragraph #10 ?;
2. How can I target the header 4 column of the table ?;
3. How many selectors are there that simultaneously targets the three ems within the paragraph #10 ?;
4. Using a CSS selector check the header image for a alt attribute;
5. Challenges suggestions are welcome.

Comments

Comments are welcome in my Weblog

Log

Version
Alfa –1: 2005–10–22
Beta –1.1: 2005–12–01
Beta –1.2: 2006–04–04
Beta –2: 2006–10–12
Final realease –: 2006–11–15

#header

<h1>CSS selectors</h1>