CODEWITHSUNDEEP
htmlcsscss-selectors
Rohit Yaduvanshi
Rohit Yaduvanshi

Reputation: 88

How can i add CSS on that DIV

I have a below div structure and I want to add css on first .column element, not its sibling

<div class="row" id="team">
   <div class="column">
     <div class="row">
        <div class="column">
        A
        </div>
        <div class="column">
        B
        </div> 
        <div class="column">
        C
        </div>
    </div>
   </div>
</div>

I want to add CSS only first .column that comes just after #team div. So how can I select a class for that .column not for the inner .column?

Upvotes: 0

Views: 55

Answers (3)

peamanschesthair
peamanschesthair

Reputation: 69

Ok, so I think you may have confused your HTML 'parent/child' structure.

You could use

#team > .column:first-child {
}

However, I don't know if you are aware that you can add any number of classes to HTML elements. You could have many classes to easily distinguish between your components and to be able to grab hold of them with CSS or JS.

For the sake of ease, you could just add another class to the element you want to add another separate class style, as I have below. Then you could just add CSS styling for that class.

<div class="row" id="team"> //this is parent
   <div class="column main">       // a child that I've added the 
                                  //  class of .main to
     <div class="row">        // a grandchild
        <div class="column">  // then great grandchildren
        A                     //these are siblings
        </div>                  
        <div class="column">  //these are siblings
        B
        </div> 
        <div class="column"> //these are siblings
        C
        </div>
    </div>
   </div>
</div>

/*Then you would just add stylings for*/
.main {
}

Upvotes: 0

Johannes
Johannes

Reputation: 67778

The most specific selector in this case is #team>.column, with > between parent and child to make sure the nested divs which also have the .column class are not affected.

#team .column would not work in this case, since it also selects the .column divs which are nested in lower instances.

BTW: You mention "siblings", which is a bit confusing, since there are not any siblings to that element...

#team>.column {
  background: yellow;
}
<div class="row" id="team">
  <div class="column">
    <div class="row">
      <div class="column">
        A
      </div>
      <div class="column">
        B
      </div>
      <div class="column">
        C
      </div>
    </div>
  </div>
</div>

Upvotes: 0

gavgrif
gavgrif

Reputation: 15509

You would use the direct descendant / child combinator ">" which in effect says - target the .column class that DIRECTLY descends from the #team parent div.

In the following - I am placing a border around the targetted .column div and not around the nested children .column divs.

and if there are other divs that are siblings of that particvular div - then you could use the :first-child pseudo selector as well..

#team > .column:first-child {...}

which says - target the .column div that is a direct descendant AND the first child of the #team div. 

#team > .column {
  border: solid 1px red;
}
<div class="row" id="team">
   <div class="column">
     <div class="row">
        <div class="column">
        A
        </div>
        <div class="column">
        B
        </div> 
        <div class="column">
        C
        </div>
    </div>
   </div>
</div>

Upvotes: 1

Related Questions