CODEWITHSUNDEEP
cssparent-child
Shell Suite
Shell Suite

Reputation: 690

select grandparent in css

i have an html code like this

<div class="main-container">
   <div class="main">
     <div class="col-main">
        <div class="category-products">
           <div class="toolbar"> </div>
        </div>
     </div>
   </div>
</div>

i've tried to change the main-container background if it has toolbar descendant, ive tried like this :

 .main-container > .main .col-main .category-products .toolbar{
  background-color: #f5f5f5;
  padding-top: 0;
}

.main-container >  .toolbar{
  background-color: #f5f5f5;
  padding-top: 0;
}

but nothing works

Snippet:

.main-container>.main .col-main .category-products .toolbar {
  background-color: #f5f5f5;
  padding-top: 0;
}

.main-container>.toolbar {
  background-color: #f5f5f5;
  padding-top: 0;
}
<div class="main-container">
  <div class="main">
    <div class="col-main">
      <div class="category-products">
        <div class="toolbar"> </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Views: 9009

Answers (6)

Naeem Akhtar
Naeem Akhtar

Reputation: 1270

using :has property we can achieve this.

Following code demonstrates both scenarios whether an element has a grand child with particular class name or not. Accordingly the styles applied.

.main-container {
  font-family: sans-serif;
  background-color: #CCC;
  padding: 5px 3px;
  color: #000;
  margin: 5px auto;
}

.main-container:has(.toolbar) {
  background-color: #F00;
  color: #FFF;
}
<div class="main-container">
  <div class="main">
    <div class="col-main">
      <div class="category-products">
        <div>the quick brown fox jumps over the lazy dog</div>
      </div>
    </div>
  </div>
</div>

<div class="main-container">
  <div class="main">
    <div class="col-main">
      <div class="category-products">
        <div class="toolbar">the quick brown fox jumps over the lazy dog</div>
      </div>
    </div>
  </div>
</div>

Upvotes: -1

iorgu
iorgu

Reputation: 3043

It has no effect, because the .toolbar has no content. Add some text, and it will work:

.main-container>.main .col-main .category-products .toolbar {
  background-color: #f5f5f5;
  padding-top: 0;
}
<div class="main-container">
  <div class="main">
    <div class="col-main">
      <div class="category-products">
        <div class="toolbar">some text</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Erža
Erža

Reputation: 21

I suggest to do it this way. It should work.

.main-container:has(.toolbar){
    background-color: #f5f5f5;
    padding-top: 0;
}

It selects the main-container, if toolbar is his descendant. Here is this pseudo-class documented: mdn - :has() pseudo-class

If you want to be sure, that main-container is the fourth parent for toolbar, you can use that: (assuming that three other elements are divs)

.main-container:has(> div > div > div > .toolbar){
    background-color: #f5f5f5;
    padding-top: 0;
}

Upvotes: 2

VilleKoo
VilleKoo

Reputation: 2854

First of all you can't traverse backwards with css. So you have to resort to javascript or find some other way.

IF however .main-container didn't have any children (or any other content) you could style it like this: 

.main-container {
  height: 200px;
  background: tomato;
  margin-bottom: 1rem;
}

.main-container:not(:empty){
  background: blue;
}
<div class="main-container" data-toolbaar="yes">
   <div class="main">
     <div class="col-main">
        <div class="category-products">
           <div class="toolbar"> HELLO</div>
        </div>
     </div>
   </div>
</div>

<!-- EMPTY -->
<div class="main-container" data-toolbaar="yes"></div>

Upvotes: 0

LKG
LKG

Reputation: 4192

Try This:

.main-container[data-toolbaar="yes"] {
   background-color:#999;
<div class="main-container" data-toolbaar="yes">
   <div class="main">
     <div class="col-main">
        <div class="category-products">
           <div class="toolbar"> HELLO</div>
        </div>
     </div>
   </div>
</div>

Description

You can pass a custom attribute data-toolbar="yes" and target it with css properties and change the target class or id properties.

Upvotes: 0

Indra
Indra

Reputation: 78

.main-container{
  background-color: #f5f5f5;
  padding-top: 0;
}
<div class="main-container">
   <div class="main">
     <div class="col-main">
        <div class="category-products">
           <div class="toolbar">CSS set background color</div>
        </div>
     </div>
   </div>
</div>

Upvotes: -1

Related Questions