티스토리 뷰
CSS Selectors
A Greater Selection
1. All HTML elements are selectors
We've used a number of HTML elements as CSS selectors so far: we've styled the HTML tags <h1></h1> with the CSS selector h1,<p></p> with p, and so on.
You may have guessed this, but if not, we'll say it outright: any HTML element can be a CSS selector! You can modify <ul>s,<table>s, and even the entire <body> by selecting ul, table, and body, respectively.
2. Multiple Selectors
As you've seen, it's possible to nest HTML elements inside one another, like so:
So what if you want to grab <p>s that are inside two <div>s, and not all <p>s?
You select those in the CSS tab like this:
3. One selector to rule them all
There's also a very special selector you can use to apply CSS styling to every element on the page: the * selector. For example, if you type
4. Rock Your Selectors
Great work! Selectors can be a bit tricky, but the more you use them, the more comfortable you'll become.
“C” is for “Cascading”
5. Branching
You can think of an HTML document as a tree: elements "branch out" from the main trunk (the <html></html> tags). The first two big branches are <head> and <body>, and branches multiply and become finer as you get to elements like <div>s, <table>s, and text (headers and paragraphs).
6. Parents, children, and siblings
If you think of the <html> tag as the trunk of the tree, you can think of its immediate branches—<head> and <body>—as its children. Both tags are children of <html>, and <html> is their parent element. Because they are both immediate children of <html> (that is, they are both only one element away), they are siblings.
Just like a real family, elements have children, grandchildren, great-grandchildren, and so on (though we don't make this distinction with HTML—a child of an element, and all that child's children, are children of the first parent).
7. Swinging form branch to branch
All right! Now that you have an idea of how HTML documents are structured, it's time to see how good you are at navigating from branch to branch.
8. Can you swing it?
Remember, you can reach an element that is a child of another element like this:
where in this case, we'd be grabbing any<p> that is nested somewhere inside a<div> that is nested somewhere inside another <div>. If you want to grab direct children—that is, an element that is directly nested inside another element, with no elements in between—you can use the >symbol, like so:
9. See it to believe it
There are two selectors that are even more specific than nested selectors like the ones above: classes and IDs. Check them out in the editor to the right.
Class and ID Selectors
10. Beyond HTML elements
There are two important selectors you can use in addition to the universal selector and HTML elements: classes and IDs.
11. Keeping it classy
Classes are useful when you have a bunch of elements that should all receive the same styling. Rather than applying the same rules to several selectors, you can simply apply the same class to all those HTML elements, then define the styling for that class in the CSS tab.
Classes are assigned to HTML elements with the word class and an equals sign, like so:
Classes are identified in CSS with a dot (.), like so:
This allows you to take elements of different types and give them the same styling.
12. ID, please!
IDs, on the other hand, are great for when you have exactly one element that should receive a certain kind of styling.
IDs are assigned to HTML elements with the word id and an equals sign:
IDs are identified in CSS with a pound sign (#):
13. Putting it all together
Now it's time to put all our new found knowledge together:
Pseudo-Class Selectors
14. Even finer control
A pseudo-class selector is a way of accessing HTML items that aren't part of the document tree (remember the tree structure we talked about earlier?). For instance, it's very easy to see where a link is in the tree. But where would you find information about whether a link had been clicked on or not? It isn't there!
Pseudo-class selectors let us style these kinds of changes in our HTML document. For example, we saw we could change a link's text-decoration property to make it something other than blue and underlined. Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked!
The CSS syntax for pseudo selectors is
It's just that little extra colon (:).
15. Links
There are a number of useful pseudo-class selectors for links, including:
a:link: An unvisited link.
a:visited: A visited link.
a:hover: A link you're hovering your mouse over.
16. First child
Another useful pseudo-class selector is first-child. It's used to apply styling to only the elements that are the first children of their parents. For instance:
Would make all paragraphs that are the first children of their parent elements red.
17. Nth child
Well done! You can actually select any child of an element after the first child with the pseudo-class selector nth-child; you just add the child's number in parentheses after the pseudo-class selector. For example,
Would turn every paragraph that is thesecond child of its parent element red.
18. Show it if you know it!