CSS Question

papadan · April 22nd, 2017, 11:30 PM

I'm reading an example of CSS where 2 selectors are separated by a "space" which would indicate an AND relationship, correct?

For example, if we see:

h2 .special {color: white;}

That would indicate that only h2 elements with a class of special get a white color.

So: <h2 class="special">Hello there.</h2>
Should show white text for the "Hello There", am I correct?

I tried to do this and it did not work. Here is my full code:

Code:

     <style>
      body {
        background-color: black;
        color: red;
        font-size: 20px;
        font-weight: 800;
      }
      h1 {
        color: greenyellow;
        font-size: 26px;
      }

      h2 .special {
        color: white;
      }
    </style>
</head>  
<body>
    <h1>Good News Productions!</h1>
    <h2 class="special">Hello there.</h2>
    <h3>Level 3 Header</h3>
    I am test text.
    <div >
      <h2>I am a header within a div</h2>
      And I am div text!    
    </div>
</body>

The result in the browser is:

The h2 element is still red.
Now...if I use:

h2.special {color:white;}

Then it works.

What am I doing wrong?

Revision: Okay, I think I figured this one out. It's inheritance.
Question: would there ever be any elements that are within a header element? A <span>?
Or is h2 .special a bad example whereas p .special would make more sense?

Imar · April 26th, 2017, 02:39 PM

Quote:

an example of CSS where 2 selectors are separated by a "space" which would indicate an AND relationship, correct?

A space would indicate an element that contains a nested element with that class applied. Without a space (i.e. p.SomeClass) implies a p element with that class directly.

>> Question: would there ever be any elements that are within a header element? A <span>?

Yep, that's certainly common.

>> Or is h2 .special a bad example whereas p .special would make more sense?

Nope, that could be an option if you needed to highlight specific content within that h2.

Hope this helps.

Imar