Now that we’ve covered a lot of information on HTML and some brief information on CSS, it’s now time to explore the power of CSS even more.

Selectors

Selectors allow you to target specific tags, ids, classes, attributes and more, on a page, ie. target a specific item or a group of items. We’ve seen and used these already briefly, to target type selectors (h1, div, p, a, etc), ID selectors (#idname) and class selectors (.classname).

The following is perfectly fine to use:

[sourcecode language="css"]h1 { color: red; }
#redtext { color: red; }
.redtext { color: red; font-size: 10px }[/sourcecode]

And to achieve the same effect we can use

[sourcecode language="css"]h1, #redtext, .redtext { color: red; }
.redtext { font-size: 10px; }[/sourcecode]

Universal Selector

The Universial selector is an asterisk – *

This selector, when used on its own, will target every element in a HTML document eg.

[sourcecode language="css"]* { color: black }[/sourcecode]

Which would then set all text to be the colour black unless you choose to override it with a more specific selector.

Descendent Selectors

Following on from this, we also have descendent selectors, whereby you can specifically target a selector within another selector eg.

[sourcecode language="css"].redtext { color: red }
#somediv p .redtext { color: blue; }[/sourcecode]

This would mean anything with a class of ‘redtext’ would be in red, however if it’s inside a paragraph within a div with the #somediv id, it would be blue instead.

Child Selectors

Child selectors are similar to descedant selectors except you are just targeting selectors that are direct children. The syntax of this is to use a greater-than sign eg.

[sourcecode language="css"]#somediv > p { color: red }[/sourcecode]

Which would only change the text colour of paragraphs that are direct children of the somediv ID. For example. If you had markup similar to

[sourcecode language="html"]

[/sourcecode]

With a descendant selector of “#somediv p” you would target both paragraphs, however with the child selector as above, you would only target the first paragraph, as the second one is not a direct child of the #somediv ID, but of the div within it.

You can also use descendant selectors with child selectors eg.

[sourcecode language="css"]#somediv div > p { color: red }[/sourcecode]

Which would then target the second paragraph.

Adjacent Sibiling Selectors

These selectors allow you to target a selector that comes after a specific selector in the markup, and both have the same parent selector. For example, if you wanted to target the h2 that directly followed a h1 then you would use

[sourcecode language="css"]h1 + h2 { color: red }[/sourcecode]

This would only change the text of a h2 to red if it came straight after the h1 in markup. eg.

[sourcecode language="html"]

[/sourcecode]

Next week I’ll explain attribute selectors and pseudo-elements and pseudo-classes.