Overriding BootStrap CSS - difficulty understanding specificity

Question

I'm absolutely new to coding and attempting a basic website, and have used the BootStrap CSS as a basis.

I've set up nav-pills and managed to customise them thus far (spacing, font, background colours etc) but struggled for hours trying to change the background colour of my header behind the nav-pills - 1 white b/g to 2 grey b/g.

My HTML header container reads:

<div class="header">
<div class="row">
<p id="navigator">

[nav-pills code]

</>
</div>
</div>

With a lot of researching into specificity I thought this may be my problem so I tried CSS code:

.header .row #navigator {
background-color: #CCCDD9;
} 

to no avail, but found that simply did work:

.header .row {
background-color: #CCCDD9;
} 

now produced the desired override of the bootstrap CSS even though I was not even selecting the #navigator ID to increase rule specifity. Could someone explain why this method works?

Further, as the new background does not appear for the other website pages I did not add the #navigator header ID to, is there a method (besides adding the #navigator ID to each HTML page) of modifying my CSS which would make this override work across all pages?

Answer 1

In your first CSS example, you are targeting the paragraph tag within the row, but in the HTML you provided your paragraph tag is malformed (missing a closure and contains no content). Because of this, the paragraph tag is being rendered with 0 height which explains why you don't see the background color. If you add content to the paragraph tag and you add a closure, it will work with the first bit of CSS you posted.

In other words, this is not a specificity issue.

<div class="header">
  <div class="row">
    <div class="col-sm-12">
        <p id="navigator">Testing</p>
    </div>
  </div>
</div>

Bootply Example

After re-reading your question, I don't think you should be using a paragraph tag at all. It looks like you were trying to use it as a container for the pills, but you should be using either an unordered list (like in the Bootstrap docs example or a div). Here's some sample code:

HTML:

<div class="header">
  <div class="row">
    <div class="col-sm-12">
        <ul class="nav nav-pills">
          <li role="presentation" class="active"><a href="#">Home</a></li>
          <li role="presentation"><a href="#">Profile</a></li>
          <li role="presentation"><a href="#">Messages</a></li>
        </ul>
    </div>
  </div>
</div>

CSS:

.nav-pills {
    background-color: #CCCDD9;
}

Bootply