CSS Did You Know? - October 10th, 2012

CSS uses a system called Selectors to determine which elements on a page should be styled. Each selector determines which elements to style in a different way, meaning you can create more complex designs if you use a wide range of selectors.

deviantART does not allow us to use every selector, but the ones they do permit us to use cover the needs of most designs. In this "tip", I will cover the selectors most commonly used on deviantART.

Class Selectors

HTML allows you to define a "class" for each element. Just give any element a class property, then define anything you like. Usually you will want to pick something that is meaningful to you, your users, and your design. Here's an example:

<div class="container"></div>

That will give your div element a class called "container". Classes can be called anything, there are no rules when it comes to naming them. You can apply your class to any element you like. You can then use a class selector in your CSS to style all the elements you apply the class "container" to. A class selector looks like this:

.container

All you have to do is place a period (full-stop) before the name of your class. You can then declare you've completed your selection by opening a bracket { and styling your element as you normally would. For example:

.container {
color: red;
border: blue 1px solid;
background-color: white;
}

Combining the CSS and HTML, you'll get this result:

Element Selectors

Pretty much everyone using CSS knows about class selectors, but something not as many people are aware of is element selectors. If you wanted every single link in your document to be a certain colour, it would be tedious to give every link a class. Using element selectors, you can select every link in your document. When you use an element selector, all you need to type is the element's name. Then, use an opening bracket and style your element. Here is an example:

a {
color: red;
}

This will cause every single a element on your page to be red.

Hover Selectors

You've likely seen really cool CSS designs which change slightly when you move your mouse cursor over certain elements. You can do this too through hover selectors. To do this, you are required first to use another selector, and then use the hover selector. This is combining selectors, which I will cover shortly. Here is an example of using the hover selector:

.container:hover

I first used the class selector from before to select our container again. Then, I applied :hover to the end, to declare that I only want the following style to be applied when the user hovers their cursor over the element. Then, use the opening bracket again, and define your style:

.container:hover {
color: blue;
border: red 1px solid;
}

If you aren't changing a certain property, like I'm not changing my background in this example, you can leave it out. Here is the result produced:

Combining Selectors

It's possible to combine many selectors if you want to select a more exact group of elements. Just place the selectors together. Let's say you had a span element and wanted to colour all the as inside it differently:

span a {
color: green;
}

As a result, all a elements placed inside a span element would be coloured green.


I hope this little tip has been useful to you! If you'd like to see a comprehensive list of CSS selectors, you can do so here.

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited!