CODEWITHSUNDEEP
csscss-selectors
wubbewubbewubbe
wubbewubbewubbe

Reputation: 741

How to stop CSS cascading or how to target only 2nd child and not 3rd with CSS

I've three containers, like so

container
  |
  + container
      |
      + container

I want to minisize the middle container by applying class "minisized". However, this also minisizes the third container.

Is it possible to target only the second container and not the third? I would like to add a class to embedded or to container, but not to the individual rows if possible.

--------------------------- update ---------------------------

I was able to make both Tarun's and Imashcha's answer work.

Code below was updated according to answer of Imashcha.

--------------------------- update ---------------------------

<style type="text/css">

    .container
    {
        border-width: 10px;
        border-style: solid;
        border-color: rgb(0,0,255);

        margin: 10px;
    }

    .container .row
    {
        border-width: 2px;
        border-style: solid;
        border-color: rgb(255,128,0);
    }

    .container.minisized>.row1 { display: block;}
    .container.minisized>.row2 { display: none;}
    .container.minisized>.row3 { display: none;}
    .container.minisized>.row4 { display: none;}

</style>

<div class="container">
    <div class="row row1">row 1</div>
    <div class="row row2">row 2</div>
    <div class="row row3">row 3</div>
    <div class="embedded">
        <div class="container minisized"> <!-- "container" --> <!-- "container minisized" -->
            <div class="row row1">row 1</div>
            <div class="row row2">row 2</div>
            <div class="row row3">row 3</div>
            <div class="embedded">
                <div class="container">
                    <div class="row row1">row 1</div>
                    <div class="row row2">row 2</div>
                    <div class="row row3">row 3</div>
                    <div class="embedded">
                    </div>
                    <div class="row row4">row 4</div>
                </div>
            </div>
            <div class="row row4">row 4</div>
        </div>
    </div>
    <div class="row row4">row 4</div>
</div>

Upvotes: 1

Views: 220

Answers (4)

Imashcha
Imashcha

Reputation: 324

The problem is that you are referring to all .rowX children of the .embedded.minisized. To access only the container's direct children, use the following:

    .embedded.minisized>.container>.row1 { display: block;}
    .embedded.minisized>.container>.row2 { display: none;}
    .embedded.minisized>.container>.row3 { display: none;}
    .embedded.minisized>.container>.row4 { display: none;}

Upvotes: 2

Tarun
Tarun

Reputation: 195

The css is getting applied on all the children inside .embedded.minisized You have to apply css on the immediate child. use ">" css selector for selecting immediate child. Use the below CSS:-

        .container .embedded.minisized > .comtainer > .row1 { display: block;}
        .container .embedded.minisized > .container > .row2 { display: none;}
        .container .embedded.minisized > .container > .row3 { display: none;}
        .container .embedded.minisized > .container > .row4 { display: none;}

Upvotes: 1

Vlad Pintea
Vlad Pintea

Reputation: 853

It would be easiest to go for adding a new class and styling accordingly.

If that's not an option, given your markup, you need some weird selector like so:

body(assuming body is above your first container in DOM) > .container > .embedded > .container { //minisize rules }

That way you target the direct children in that specific order You could also add your new class to the middle one in JS but that just makes your render all jumpy.

Upvotes: 1

DadaArno
DadaArno

Reputation: 200

I think nth-child() selector could be interisting

Upvotes: 0

Related Questions