CSS 101 | Part Two - The Selectors
Published on March 6th 2010.
In Part One, we learnt that CSS stands for Cascading Stylesheets and is used to control the appearance of a web page. We also learnt where to put our CSS. So, the million dollar question - how do we use CSS? Simple. We tell CSS to target certain elements, using various selectors.
What are the selectors?
Here is a list of the CSS Selectors:
- The ID selector
- The class selector
- The type selector
- The descendant selector
- The adjacent sibling selector
- The attribute selector
- The child selector
- The universal selector
The ID Selector
The ID selector targets an element based on its ID, which is denoted by the HTML ID attribute. Given multiple items can not have the same ID, the ID selector is useful for styling your layout elements - your container, your header, your content, your footer, etc.
The ID selector is denoted by the hash #. In CSS, we would write the following to style a div with an ID of header:
#header {
border:6px dashed #1b8327;
}
The Class Selector
The Class selector is applied to an element using the HTML class attribute and is used to style elements based on their function within a web page not what the element is or looks like.
We create classes in CSS by prefixing a dot . to them.
.badge {
font-style:italic;
}
When creating classes, it is important to think "what is the purpose of this class?" not what will the styles for this class look like?. For instance, don't give your admin links a class of white-link just because they are white; don't give your image a class of pretty-picture just because it looks pretty. Your white links should be called admin-links or whatever-container-they-belong-to-links whatever-purpose-they-perform-links; your pretty picture should be given a more descriptive class, based on what its purpose is. If it's a thumbnail, give it a class of thumbnail or thumb. If it's a picture of an item, give it a class of item. Think purpose. Not appearance.
The Type Selector
The type selector is used to target an elements based on its tag. This is useful for when you want to apply styles en masse. For instance, if you want every instance of a textarea on your website to be dark purple, you would say:
textarea {
background-color:#821b83;
}
The Descendant Selector
The descendant selector is used to target elements within elements. It's useful when you only want to style elements that belong to a specific region on a page like navigation, or a header, or footer. Here is an example which gives all of the links within our page container a colour of yellow:
#container a {
color:#ebda19;
}
The Adjacent Sibling Selector
The adjacent sibling selector is now pretty well supported and performs quite a neat function: it allows you to target an element that is next to another element. For instance, suppose you have an image in a blog, which has a class of .blog-img, directly followed by a block of text. You want the first paragraph of this block of text to be italicised, so you would say:
.blog-img + p {
font-style:italic;
}
The Attribute Selector
The attribute selector is another selector that, once upon a time, was not widely supported, but now is (obviously IE6 doesn't support it, but who cares). The attribute selector will style an element based on its attribute. Let's look at an example. Supposing all of your external links have a rel="external" (which is the (X)HTML Strict equivalent of target="_blank") and you want your external links to be dark blue, you would say:
a[rel=external] {
color:#110e7f;
}
The Child Selector
The child selector targets an element that is a child of another element basically a direct descendant. If you have a div called #party inside a div called #house, #party is the child of house. But, if you have a div inside #party called #disaronno, #disaronno is a child of #party, but not a child of #house. It has to be directly inside an element to be its child. Let's look at a fleshed out version of our house-party example:
#house > #party {
border:6px solid #13beb8;
}
This rule-set will give #party and only #party a thick teal border. If you then wanted to target #disaronno, you would say:
#party > #disorono {
font-weight:bold;
}
The Universal Selector
The universal selector, denoted by the *, is used to target any element on a page. When used by itself, it will target every single element on your page, regardless of what it is. If used in conjunction with another selector, it will target every instance of that selector across your website; used with the type selector, it will target every instance of that tag; with the class selector, every element belonging to that class; with the ID selector, every element with that ID.
So...
* {
padding:12px;
border: 1px solid #be135f;
}
....Will give all the items on your page a padding of 12px and a 1px pink border.
As you can, see...it's kind of pointless. If you want to target all the divs on your site, use the type selector; if you've got a class called shop-links, why bother using the universal selector, if its function is already to target every element attached to it. The function nowadays of the universal selector is in targeting browsers that do not support CSS2...because the universal selector did not exist prior to CSS2. Prefix an element with the universal selector, and any older browsers will not pick up that CSS rule-set.
To be honest, all modern browsers support CSS2 so there's not much point using the universal selector. Sure, if you want to apply a style to everything on your site like if you're resetting margins or padding it's useful, but barring this, not really!
For more information on the CSS selectors, visit the W3C Selector Page.
Conclusion
In conclusion, we use selectors to target HTML elements that we wish to style. There's a whole bunch of selectors, some of which will become second-nature to you, and others you may pass on; some that are integral to coding, some that are really cool, and others that you can do without. It's really down to personal preference how you use them, and you'll get your own style over time...but a word of advice: don't go over the top with classes. Writing a class called .navLink for your navigation items is pointless, when you can use the descendant selector in conjunction with the type selector, as such:
#nav a {
...your link css..
}
The descendant selector and the type selector will save you a hell of a lot of coding!
And that's the end of CSS 101: Part Two. In Part Three, titled How to apply CSS, we will be talking about how to apply CSS to your elements.
