CODEWITHSUNDEEP
htmlcsscss-selectors
prosseek
prosseek

Reputation: 191189

How can I set css for a class in a class?

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?

Upvotes: 1

Views: 208

Answers (3)

amosrivera
amosrivera

Reputation: 26554

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;
}

Upvotes: 5

harpo
harpo

Reputation: 43228

@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.

— Google "Let's make the web faster" docs

And

Descendent selectors are a major slow down to the Safari browser

— John Sykes, May 2008

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.

Upvotes: 1

stecb
stecb

Reputation: 14766

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 */
}

Upvotes: 1

Related Questions