QUICK CONTENTS:
1. Universal Selector
2. Element Selector
3. ID and Class Selecto...
4. Attribute Selector
5. Element-Specific Sel...
6. Connecting the Dots
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
, 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: [
/* 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.
Selector |
Description |
|
Starts a new selector (makes elem1 and elem2 two different selectors) |
|
Selects all elem2 that are children of elem1, even if there are other tags between them |
|
Selects all elem2 that are direct children of elem1 (no other layers/tags between them) |
|
Selects the first elem2 that is a sibling of elem1. |
|
Selects all elem2 that are siblings of elem1 |
|
Selects all elements that have attr set, with a value containing val |
|
Selects all elements that have attr set, with a value starting with val |
|
Selects all elements with attr set to a value starting with val |
|
Selects all elements with attr set to a value ending in val |
|
Selects all elements with attr set to a value containing val |
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
on a certain element. The ~= and |= work for those cases, while the other two do not.
#panda
?