Moving beyond HTML, Class and ID selector there are some more CSS tools in the CSS toolkit. These selectors are part of the CSS2 specification. None of your fancy CSS3 here, so you can be assured of good browser support.

Relational Selectors

Relational Selectors allow the designer to target content based on the relation of element within your HTML structure. An easy one is:


div h1{
 /* Some properties */
}

The above will target all h1 tags inside div tags.

The child selector allows the designer to match any element that is a direct child of the element. For example:


ol>li {
 /* Some properties */
}

Here the li is targeted only if it is a child of <ol>. Therefore the <li> elements inside of <ul> are not targeted.

For browser compatibility make sure there is no white space around the  >  character.

This selector is supported by all modern browser and even supported by IE7. This allows designers to use the  >  to create rules that they know will be ignored by IE6.

The universal selector * is a wildcard that will match all elements on the page. This is often used for reseting all margins and paddings for example:


* {
    margin: 0;
    padding: 0;
}

* An aside on asterisk

The asterisk is also used as a hack for applying properties to IE7 and below. By prefixing a CSS property with an asterisk (*) that property will be ignored by all other browsers apart from IE7 and below.

ul.menu li{
    display:inline-block;
    zoom: 1;
    *display:inline;
}

The code above, for example, would be used to change the targeted <li> elements from display block to inline-block. As IE7 does not support inline-block we prefix the display property with an asterisk display to set it to inline. Incidentally, the zoom: 1 is another IE hack known as the hasLayout fix.

Attribute Selectors

Attribute selectors can be used to target content based on the attribute of a HTML element. For example take the following HTML:


<a href="index.html" title="Home">Back to Home Page</a>

The HTML anchor tag has a title attribute. This can be targeted with the following CSS:


a[title]{
  font-weight:bold;
}

In the above example all <a> tags with an attribute or 'title' received the rule. The attribute selector can be refined by targeting particular values of an attribute. For example:


a[title='Home']{
  font-weight:bold;
}

A common use case is to target all <input> text fields of type 'text' for example:


input[type='text']{
  font-weight:bold;
}

Pseudo Classes - First and Last and Always

You may be familiar with the Pseudo Class selectors that help style hyperlinks such as link, visited, hover and active. But there are others. The 'focus' pseudo class can be used with form elements to apply styling when an element gets focus. Great for forms.


<input class="myForm" type="text" name="first name" />

The above can be targeted with the following CSS such that when the user places the cursor inside the text field its background colour changes.

.myForm:focus{
    background-color:#CCFFC4;
}

Try the demo:

Bringing this together with attribute selectors you could use:


input[type='text']:focus{
  background-color:#CCFFC4;
}

... such that all text fields have the focus behaviour as in this demo.

Focus is fun, but there are more. We can use 'first-child' to target the first child of a element. This is great for lists. Take the following:

<ul>
	<li>Home</li>
	<li>Contacts</li>
	<li>Products</li>
	<li>Services</li>
	<li>News</li>
	<li>>Events</li>
</ul>

We can target the first item in the list with:

li:first-child{
    font-weight:bold;
}

Have a read of 'Horizontal Menus from Humble HTML Lists' to see a fuller example.

The then, of course, 'last-child' gets the pesky last child.

li:last-child{
    font-weight:bold;
}

Here is a demo of this little trick.

Note: That it is not <ul> that is used in the rule but <li> even though we are targeting the last-child of <ul>. Specifically what 'last-child' does is target the 'last-child' of the parent element, and the parent of <li> is the <ul>.

Leave a Comment