With this HTML code.
<div class="noote">
<p class="first admonition-title">Noote</p>
<p class="last">Let's noote.</p>
</div>
How can I set the color of Noote to be red with css? I mean, how can I set something for (div class="noote") and (p class="first") under it with css?
Try this:
/*this will apply for the element with class first
inside the element with class noot */
.noote .first{
color:red;
}
/* If you wanted to apply a rule for both individually
you can do: */
.noote, .first{
border:1px solid red;
}
div.note{
...
}
Refers to the div element that has the class note.
p.first{
...
}
Refers to the p element that has the class first.
div.note p.first{
...
}
Refers to the p element inside note that has the class first.
In addition, if you want to set an element child without setting a class to it,
div.note p:first-child{
/* it refers to the first p that contains noote */
}
.first inside .noote, not just separately.:first-child. The correct way is div.note p:first-child. See stackoverflow.com/questions/4195161/… for details.
@amosrivera's got it.
It's worth nooting that descendant selectors require more CPU. I always use more specific rules where possible. So instead of
.noote .first{
backgorund:red;
}
You could say
.noote > .first{
backgorund:red;
}
A nominal difference in most cases, but still a good habit.
Really?
Descendant selectors are inefficient... The less specific the key, the greater the number of nodes that need to be evaluated.
And
Descendent selectors are a major slow down to the Safari browser
Some performance tests show little impact, and most writers agree that it only makes a difference on very large documents.
But mainly, I'm just going with my programmer instinct — say what you mean, and no more.
