Ian Swenson .com

CSS Selectors

I briefly mentioned that there are different CSS selectors, like HTML elements. We can use CSS to modify every div or span on a page, but this isn’t very useful in practice. What if you want one div to behave differently from another? This is where we use id and class.

Both id and class are HTML attributes. They can be used for just about every HTML element. They look like this:

1
2
3

<div id="foo">
     <p class="bar"><span class="redText">Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Note that all ids and classes are case-sensitive, so my redText id is different from redtext or RedText.

The difference between ids and classes are that ids are unique and classes aren’t. Simple, right? We’ll see them in action soon enough.

Ids and classes are used to communicate between HTML and CSS (and scripts). It lets the web page know, “This is the div I’m talking about. Right here!” This means that you can give an element an id or class, and then modify it with CSS.

Ids are denoted by a pound sign (#) and classes by a period (.). See them here:

1
2
3

div#foo { margin: 0; padding: 10px; }
p.bar { text-indent: 1em; }
span.redText { color: red; }

The above example is fairly specific. It’s saying, “When you see the div named foo, do this to it,” and “Whenever you see any paragraph with the class bar, do that to it” (and so on). You can be even more general, like this:

1
2
3

#foo { margin: 0; padding: 10px; }
.bar { text-indent: 1em; }
.redText { color: red; }

This is a bit more general, saying, “When you see the element named foo, do this to it,” and “Whenever you see any element with the class bar, do that to it.” So for our redText class, we could use it on span elements or paragraph elements, up to us. But remember, ids can each be used only once on a given page.

You can also use multiple elements/ids/classes within a selector to better define what you want to target:

1

#foo p { text-indent: 1em; }

This is saying, “Do this to any paragraph element within the foo id.” You can go as many deep as you wish. Here is an actual example from this web site:

1

.post .bottom_nav a b b b{top:-1px;padding:1em;border:0;text-align:center;}

This says (deep breath), “Do this to any bold element within a bold element within a bold element within an anchor element within something with the class bottom_nav within something with the class post.” Yikes! The reason for that is that it’s easier to type that monstrosity once in a CSS file than it is to give that bold element a class every time I need it in my HTML. (And, yes, you can have negative margins in CSS.)

Another thing to know about CSS is that the last value takes precedence over any preceding value, unless there’s an overriding id or class. Par example:

1
2

p { border: 1px solid red; }
#foo { border-bottom: 0; }

If we had a paragraph with the id of foo, this CSS would give it a 1 pixel red border on the top, left, and right, but not the bottom. Even though the first line tells it to put a red border on all four sides, the foo id overrides that since it’s after the first declaration. But, id and class override this order of operation, so the same doesn’t hold true for the following example:

1
2

#foo { border-bottom: 0; }
p { border: 1px solid red; }

This example would look the same as the prior example. Even though it looks like the second line would override the first, it doesn’t because the id takes precedence over the general selector of p.

All of this may seem a bit beside the point for a beginner, but it’s good to know from the start. Once you start having CSS files hundreds of lines long, it’s nice to have the order of operations in your mind to avoid frustrating complications.

One last CSS tip before we move on to positioning: you can have both an id and a class in the same element. You can even have multiple classes for the same element, just separate them with a space. It makes it useful if you use a class for lots of different types of elements and don’t want to retype the CSS. For example:

1
2
3

<div id="foo" class="bar redText">
     <!-- Content -->
</div>