[CSS3] Selectors

There’s a handful of different selectors available, that allow you to select any element(s) you wish – however specific or general. You can combine these in any way you like, and in any number. You could write a rule that selects all p (paragraph tags) that are direct children of div, or select every input with type=”text”, or even select a specific span tag ten levels deep in some HTML structure. The possibilities are endless!

Universal Selector

Let’s start off simple. The asterisk ( * ) selects every element. This is useful, for example, if you want to set a base font family for the entire page.

Element Selector

To select all tags of a certain kind, you simply use the tag name without the < and > around it.

For example: <p> becomes p, <h1> becomes h1

/* Selects all paragraph elements */
p {
	color:red;
}

/* Selects all input elements */
input {
	font-size:24px;
}

ID and Class Selector

In the HTML tutorial, we’ve already seen the id and class attributes that are available to every element.

The idea is that every id is unique. Only one element can have a certain id.

To select the element with a certain id, use #theIDName

If you want multiple elements to have the same styling rules applied, you use class. You can give as many elements as you want the same class name.

To select all elements in a certain class, use .theClassName

/* Selects the element with ID panda */
#panda {
	color:red;
}

/* Selects all elements with class panda */
.panda {
	font-size:24px;
}

Attribute Selector

The last option is to select elements based on their attributes. Such a selector is enclosed within brackets, and can do two things:

Select everything that has a certain attribute: [attribute]

Select everything that has a certain attribute set to a certain value: [attribute=value]

/* Selects all elements with the src attribute set */
[src] {
	color:red;
}

/* Selects all elements with the src attribute set, with a value of panda.jpg */
[src="panda.jpg"] {
	font-size:24px;
}

Element-Specific Selectors

The last two categories can be combined with element selectors. To select a specific element with a certain ID, Class or Attribute, you simply put all the components right after each other. For example:

a.coolLink selects all anchor tags with a class coolLink

input[type=”password”] selects all password input tags.

You are also allowed to use as many ID, Class and Attribute selectors after each other in this manner. The possibilities are endless! But, more than two of these after each other is very uncommon, because it’s often just more complex than necessary.

/*Selects the anchor element with ID coolLink, all span elements with class panda, and all text input fields */
a#coolLink, span.panda, input[type="text"] {
	color:red;
}

Connecting the Dots

Putting them directly next to each other doesn’t work for everything, and most components need to be connected in another way. They can be separated by white space or a few predetermined special characters, and what you put between them largely determines how the selector functions. I’ve put together a nice table for you.

As you can see, the attribute selectors have some overlapping functionality. The difference is, that some attributes have a value that has white space or dashes in it. For example, you could set class=”class1 class2 class3” on a certain element. The ~= and |= work for those cases, while the other two do not.