CODEWITHSUNDEEP
csscss-selectors
Spedwards
Spedwards

Reputation: 4492

CSS :NOT() Selector Isn't Working

I've got a small snippet of CSS that I want to apply to all text except that in <header>, <h1>, <h2>, and <h3> elements.

*:not(header):not(h1):not(h2):not(h3) {
    font-family: Verdana, Helvetica;
    text-shadow: #F8F8FF 1px 1px 1px;
}

I've tried body:not, :not, and even *:not as seen above, but none of them are working. All my headers and header content are having their font changed and a text shadow applied.

Below is what my content looks like:

<body class="home">
    <header>
        <nav>
            <a href="index.html"><img src="logo.jpg"></a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="p2.html">Page 2</a></li>
                <li><a href="p3.html">Page 3</a></li>
                <li><a href="p4.html">Page 4</a></li>
                <li><a href="p5.html">Page 5</a></li>
            </ul>
        </nav>
    </header>
    <div id="wrapper">
        <div id="main" class="left">
            <h1>Welcome</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, ex, officiis, corporis earum similique repellat deleniti quam aliquam beatae temporibus recusandae dolorem. Dolorem, non alias ut laborum dignissimos quisquam enim.</p>
            <p>Obcaecati, rerum nihil quam neque officiis modi minima asperiores in eveniet doloremque reiciendis eligendi autem beatae molestiae fugit ut est quos culpa tempora quidem! Quae, dolorum exercitationem magnam est odit?</p>
            <p>Sapiente, facilis, ea nulla consectetur natus inventore beatae commodi repellat explicabo odio eos dolorum modi sequi ducimus aperiam eligendi quisquam ex! Quibusdam, ratione earum repellat optio cumque ipsum maiores voluptas.</p>
        </div>
        <div id="sidebar" class="left">
            <div class="section">
                <h3>Heading</h3>
                Irrelevant Content
            </div>
            <div class="section">
                <h3>Heading</h3>
                Irrelevant Content
            </div>
        </div>
    </div>
    <footer></footer>
</body>

Could someone please explain why what I'm doing isn't working, and what I can do to fix it?

Upvotes: 2

Views: 1271

Answers (6)

Andy Macaulay-Brook
Andy Macaulay-Brook

Reputation: 127

If that is the only CSS that is being applied apart from your User Agent's base CSS, then you would expect those rules to be applied to every element.

By default all elements will inherit the font from their ancestors. Your rule tells all elements that are not header, h1, h2 or h3 to use your choice of fonts. So header, h1, h2 or h3 still use their default value of 'inherit' and inherit those same fonts from their parent elements.

You would be better off setting this font choice on your body and then setting a specific alternative font choice on header, h1, h2 & h3.

Upvotes: 2

aifrim
aifrim

Reputation: 576

While you are not applying the rules to the header you are applying them to the elements within the header.

body *:not(header):not(header):not(h1):not(h2):not(h3) {
    font-family: Verdana, Helvetica;
    text-shadow: #F8F8FF 1px 1px 1px;
}

header *,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: initial;
    text-shadow: initial;
}

If you give the header *, h1, h2, h3, h4, h5, h6 the inherit value they will use the font-family and the text-shadow you provided via the :not:not rule at the beginning.

Upvotes: 0

Richard Howell
Richard Howell

Reputation: 359

I would change you approach. Set the rules you would like to apply to everything to body then overwrite header, h1, h2, h3:

body {
    font-family: Verdana, Helvetica;
    text-shadow: #F8F8FF 1px 1px 1px;
}
header, h1, h2, h3 {
    font-family: Arial, Helvetica, sans-serif;;
    text-shadow: none;
}

You could also create a class with the styling you would like negate .not-me:

.not-me {
    font-family: Arial, Helvetica, sans-serif;;
    text-shadow: none;
}

Then apply this class to any elements you do not want styled like everything else:

<h1 class="not-me">Welcome</h1>

Upvotes: 2

Micha&#235;l van de Weerd
Micha&#235;l van de Weerd

Reputation: 788

The problem is that both the font-family and the text-shadow attributes are usually inherit by default. This means that you can exclude the header element from setting these attributes any way you want, but if its parent element, body in this case, is included in your style block it will inherit it anyway. So, you should change the default value of the font-family and text-shadow, for example like this:

* {
    font-family: monospace;
    text-shadow: none;
}

Upvotes: 0

Clemens Himmer
Clemens Himmer

Reputation: 1352

You should probably try this approach instead:

body {
  // Style all elements
    color: red;
}

h1,h2,h3{
  // Style those elements different
  color: black;  
}

Upvotes: 1

Germano Plebani
Germano Plebani

Reputation: 3655

:not(header), :not(h1), :not(h2), :not(h3) {
    font-family: Verdana, Helvetica;
    text-shadow: #F8F8FF 1px 1px 1px;
}

Try this.

Upvotes: -1

Related Questions