CODEWITHSUNDEEP
css
nullexcptn
nullexcptn

Reputation: 13

How to exclude some class when parent class is selected

I'm sorry if this is a silliest question that you've ever found. I wanna find some "shortcut" to make this happen. Here's the example:

<body>
    <div class="wrapper">
        <nav></nav>
        <aside></aside>
        <footer></footer>
    </div>
</body>

I wanna give some style into the all of .wrapper content, except for the footer. Is it possible to handle it? Or... Is there any CSS selector for an exception?

NOTE: Please don't give me an "easy way" solution like this: 

nav { 
    //some style
}
aside {
    //some same style
}

Upvotes: 0

Views: 558

Answers (2)

VSM
VSM

Reputation: 1785

This may be helpful.

The * refers all elements and *:not(footer) says all elements except footer element.

This .wrapper *:not(footer) stands to select all elements except footer inside .wrapper class.

This is how it works.

.wrapper *:not(footer)  {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #cccccc;
    color: #000000;
}
<body>
    <div class="wrapper">
        <nav>01</nav>
        <aside>02</aside>
        <footer>03</footer>
    </div>
</body>

Upvotes: 2

MaZoli
MaZoli

Reputation: 1533

Thats quite easy. Just do it as follows: 

.wrapper > *:not(footer)  {
    color: green;
}

Upvotes: 3

Related Questions