Identify previous CSS-CodePudding

Is it possible to identify previous CSS?

The focus here is the card class.

Example:

<div >
        <div >
            <div >
                <label for="">Title</label>
                <div >
                    120
                </div>
    
                <div >
                    Blah blah blah
                </div>
            </div>
        </div>

        <div >
            <div >
                <div >
                    <label for="">Title</label>
                    <div >
                        120
                    </div>
        
                    <div >
                        Blah blah blah
                    </div>
                </div>
            </div>
    </div>

In the first row the class card is alone. In the second row the class name is inside a column represented by class sm-6 md-6 lg-6.

QUESTION

Is it possible to apply a CSS to card that is only in sm, md or lg?

Thanks.

CodePudding user response：

As requested, if you don't want to style all sizes you can do:

div[class^="sm-"] > .card {
    // styles all classes starting with sm-* and where the first
    // child element has the class .card
}
div[class^="md-"] > .card {
    // style    
}
div[class^="lg-"] > .card {
    // style
}

Or one rule for all cases:

div[class^="sm-"] > .card, div[class^="md-"] > .card, div[class^="lg-"] > .card {
 // styles card when its a child to a sm md or lg class
}

What does this do?

[] selects an elements attribute, in this case [class]

^ means starts with

CodePudding user response：

CSS to .card that is a child of either sm-6, md-6 or lg-6 class.

   .sm-6 .card, .md-6 .card, .lg-6 .card {
      background-color:red;
    }

CodePudding user response：

.sm-6 .card, .md-6 .card, .lg-6 .card {
      color:white;
    }