CODEWITHSUNDEEP
csstwitter-bootstrapcss-selectors
user4491949
user4491949

Reputation:

How do I select the elements inside of another in CSS?

I have this HTML code as an example:

<body>
    <div class="jumbotron">
        <h1>Bootstrap Example</h1> 
        <p>Just another crazy blog</p> 
    </div>

   <div class="container">
      <p>This is some text.</p> 
      <p>This is another text.</p> 
  </div>

I am trying to style the jumbotron using this code:

.jumbotron h1, p{
  color: #FAE3F2;
  font-family: 'Orbitron', sans-serif;

}

The problem is that when I apply these changes, they also affect the paragraph inside the container and I can't understand why. What am I doing wrong?

Upvotes: 1

Views: 406

Answers (2)

Tom Tom
Tom Tom

Reputation: 3698

Try this

.jumbotron h1, .jumbotron p{
  color: #FAE3F2;
  font-family: 'Orbitron', sans-serif;

}

The , separates whole expressions, so .jumbotron doesn't carry over to the second one.

Upvotes: 1

fmuser
fmuser

Reputation: 254

Replace the selectors with this one:

.jumbotron h1, .jumbotron p {...}

Having your selector without .jumbotron p {..} means that all the p elements will be selected.

Upvotes: 0

Related Questions