2. Identifier vs. Class
Identifier or class? What’s the difference?
An identifier is specified only once on a page
and has a higher inheritance specificity
(“priority”) than a class.
A class is reusable as many times as needed
in a page.
3. Combination of selectors
●
p#intro {
color: red;
}
An element, identifier, and class selector
can be combined to select a more specific
element
<p>
Hello, world.
</p>
<p id="intro”>
Hello, world.
</p>
4. Combination of selectors
●
An element, identifier, and class selector
can be combined to select a more specific
element
p#intro.impt {
color: red;
}
<p>
Hello, world.
</p>
<p id="intro">
Hello, world.
</p>
<p id="intro”
class="impt">
Hello, world.
</p>
5. Multiple Selectors
• Several selectors can have the same declarations by
combining them with a comma.
• <p id="intro" class="impt">
• Hello, world.
●
p#intro.impt,
h1.header
{
color: red;
}
</p>
<h1 class="header">
Hello, world.
</h1>
14. Descendant Selectors
header p{
color: red;
}
●
Note: only p is color red. header (the
parent) is not affected.
<header>
<p>
Hello, world.
</p>
</header>
15. Descendant Selectors
●
Not only direct descendants, but also
indirect descendants
header p{
color: red;
}
<header>
<div>
<p>
Hello, world.
</p>
</div>
</header>
17. Adjacent Sibling Selectors
h2+p {
color: red;
}
<h2>Heading</h2>
<p>The selector above
matches this
paragraph.</p>
<p>The selector above
does not match this
paragraph.</p>
Note: it does NOT match the
second <p> because it is
NOT adjacent to h2 (although
it is a sibling
