CSS: Selectors

By using selectors, you can apply certain rules to one or several elements.

Element Selectors

Element selectors refers to HTML tags such as h1, p, body etc. The selector would be, for example, the h1 tag. After adding the selector, you'd add one or several declarations, such as font: 15px arial; color: blue;

In order to make all text in the body green and center it, you would use the following code:

  • body {
  • color: green;
  • text-align: center;
  • }

Class Selectors

Class selectors are useful when you want to style specific parts of a document, rather than applying them to all elements like the element selectors. You can use the same class an unlimited amount of times in a document. An advice is to use class names that makes sense. A red border might turn blue in your next layout change, so it'd be more appropriate to simply name it "border".

For the usage, imagine you have a p tag that needs to be 13px, using Arial and be in bold. If you'd use an element selector, you'd make all paragraphs 13px, using Arial and be in bold. So this is why classes are useful.

To apply a class to, for example, a p tag, use the following code:

  • <p class="bold">This p tag is 13px, using Arial and is bold. </p>

The code in your CSS would then be as follows:

  • p.bold {
  • font: bold 13px arial;
  • }

If you'd like all elements to be able to use the class, simply remake the code into .bold {

Id Selectors

Id's are slightly different from classes. They're unique, and can only be used once in a document.

To apply an id selector to a div tag, the following code would be used:

  • <div id="border"> Content here. </div>

The code in your CSS would then be as follows:

  • div#border {
  • border: solid 1px black;
  • }

If you'd like all elements to be able to use the id, simply remake the code into #border {

Descendant Selectors

Descendant selectors are very useful as they can style an element that is located inside of another element. Imagine the following situation: You have an unordered list, and you want all li elements to be styled in a certain way. You could apply a class to each li element, but that would be bothersome. It's way easier to take use of the descendant selectors.

In this case, ul is the ancestor, and li is the descendant. So you'd specify the code like this:

  • ul li {
  • color: purple;
  • font: 11px courier new;
  • }

If the ul has a certain class specified to it, you would put the code as ul.tutorial li {

Children Selectors

Children selectors are very specific and allows the styling of an element's child. For example, you might want to style the first strong inside a p tag, but you want the second strong tag to remain untouched. In order to do so, the following code would be used:
  • p > strong {
  • color: red;
  • }

How to Group Selectors

It's possible to group selectors. For example, if you'd like all your p, h2 and h3 tags to have a blue font, and rather than individually make a class for each, you could group them:
  • p, h2, h3 {
  • color: blue;
  • }

You could also group several selectors into one tag in your HTML. Notice each selector needs to be seperated by a space.

  • <div class="dropcap border background"> Content here. </div>
eXTReMe Tracker