CODEWITHSUNDEEP
htmlcss
Leila K.
Leila K.

Reputation: 77

CSS: selecting every div element except for one

I'm having trouble with the ':not' selector in CSS, I want to select everything under head except for the title (h1) I tried using '#head:not(h1)' but it still selects everything under #head. What is the proper way to select all but h1? Thankyou.

<html>
<head>
<style>
    /*I want to select all the elements under head id except for h1 title*/
    #head:not(h1){
        background: red;
    }
</style>
</head>
<body>
<div id = "subpage">
    <div id = "head">
        <hgroup>
            <h1>My Webpage</h1>
            <h3>Subheading</h3>
        </hgroup>

        <div class = "posts">
            <ul id = "post1">
                <li>entered by: John</li>
                <li>hearts: 2000</li>
            </ul>
        </div>
        <div class = "posts">
            <ul id = "post2">
                <li>entered by: Chris</li>
                <li>hearts: 100</li>
            </ul>
        </div>
    </div>
    <div id = "whats new">
        <h1>Title</h1>
        <p>a bunch of text</p>
    </div>
</div>
</body>
</html>

Upvotes: 0

Views: 1081

Answers (4)

Dulani Maheshi
Dulani Maheshi

Reputation: 1078

First you want to add a background color for <h1>. Try this.

#head h1{
    background: white;
}

#head :not(h1) {
    background: red ;
}
<div id = "subpage">
    <div id = "head">
        <hgroup>
            <h1>My Webpage</h1>
            <h3>Subheading</h3>
        </hgroup>

        <div class = "posts">
            <ul id = "post1">
                <li>entered by: John</li>
                <li>hearts: 2000</li>
            </ul>
        </div>
        <div class = "posts">
            <ul id = "post2">
                <li>entered by: Chris</li>
                <li>hearts: 100</li>
            </ul>
        </div>
    </div>
    <div id = "whats new">
        <h1>Title</h1>
        <p>a bunch of text</p>
    </div>
</div>

Upvotes: 0

JS KIM
JS KIM

Reputation: 695

You can do it like this.

#head *:not(h1) {
    background: red;
}

OR

#head :not(h1) {
    background: red;
}

However, meaning that it selects everything except 'h1' under '#head' means that it contains 'hgroup', which is the parent element of 'h1'.

In this case, the background color of 'h1' is 'transparent' by default, so the background color is red due to 'hgroup'.

#head *:not(h1) {
    background: red;
}
<div id="subpage">
    <div id="head">
        <hgroup>
            <h1>My Webpage</h1>
            <h3>Subheading</h3>
        </hgroup>

        <div class="posts">
            <ul id="post1">
                <li>entered by: John</li>
                <li>hearts: 2000</li>
            </ul>
        </div>
        <div class="posts">
            <ul id="post2">
                <li>entered by: Chris</li>
                <li>hearts: 100</li>
            </ul>
        </div>
    </div>
    <div id="whats new">
        <h1>Title</h1>
        <p>a bunch of text</p>
    </div>
</div>

Upvotes: 1

Kaumadie Kariyawasam
Kaumadie Kariyawasam

Reputation: 1456

#subpage div.head *:not(h1) {
     background: red;
}

use styles like this.

go to this link & you can get idea https://stackoverflow.com/a/16769552/8928037

Upvotes: 0

Lil Devil
Lil Devil

Reputation: 733

You could separately specify the h1 elements to have the base color.

#head h1 {
    background: white;
}
#head * {  /* depending on the look you want, you may not need the * */
    background: red; 
}
<div id = "subpage">
    <div id = "head">
        <hgroup>
            <h1>My Webpage</h1>
            <h3>Subheading</h3>
        </hgroup>

        <div class = "posts">
            <ul id = "post1">
                <li>entered by: John</li>
                <li>hearts: 2000</li>
            </ul>
        </div>
        <div class = "posts">
            <ul id = "post2">
                <li>entered by: Chris</li>
                <li>hearts: 100</li>
            </ul>
        </div>
    </div>
    <div id = "whats new">
        <h1>Title</h1>
        <p>a bunch of text</p>
    </div>
</div>

Upvotes: 0

Related Questions