Identify previous CSS

Question

Is it possible to identify previous CSS?

The focus here is the card class.

Example:

<div class="app">
        <div class="row">
            <div class="card">
                <label for="">Title</label>
                <div class="number">
                    120
                </div>
    
                <div class="number">
                    Blah blah blah
                </div>
            </div>
        </div>

        <div class="row">
            <div class="sm-6 md-6 lg-6">
                <div class="card">
                    <label for="">Title</label>
                    <div class="number">
                        120
                    </div>
        
                    <div class="number">
                        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.

You can use this https://developer.mozilla.org/en-US/docs/Web/CSS/:has , But it's not yet supported widely. — Amini, Dec 17 '21 at 13:42
@AmirrezaAmini No it doesn't work in any browser as you can see here: https://caniuse.com/?search=has — Joel, Dec 17 '21 at 13:42
you said "Use can use this", but you can't. since it doesn't work in any browser.... Also, how is "not widely supported" === 0% of browsers? — Joel, Dec 17 '21 at 13:43
@Joel it is possible to identify the class name only by the letters `sm, md, lg`, because each letter has a number up to 12...lol? — Tiago, Dec 17 '21 at 13:54
You can do: `[class^="md-"]` instead of `md-6` and it will match all classes starting with md- — Joel, Dec 17 '21 at 13:56
@Joel Would it be this? `[class^="sm-"], [class^="md-"], [class^="lg-"] .card{ background-color: #000; }` — Tiago, Dec 17 '21 at 14:02
No, it would not be, because with that you would be selecting all elements with a class starting with `sm-` or `md-` (and applying the background color to _those_); and `.card` elements only if they were nested inside an element with a class starting with `lg-`. — CBroe, Dec 17 '21 at 14:07
`div[class^="sm-"][class^="md-"][class^="lg-"] > .card ( background-color: #000; }`. See https://stackoverflow.com/questions/12340737/specify-multiple-attribute-selectors-in-css and also https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — TylerH, Dec 17 '21 at 14:22
@TylerH how to identify the first one, the ones in the middle and the last one? Ex: jsfiddle.net/x1f4oLrn — Tiago, Dec 17 '21 at 17:17

Joel · Accepted Answer · 2021-12-17T14:18:40.717

1

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

edited Dec 17 '21 at 14:18

answered Dec 17 '21 at 14:12

Joel

5,732
4
37
65

You can make the second rule more efficient by just combining the attribute selectors. – TylerH Dec 17 '21 at 14:22
Last order, how to identify the first one, the ones in the middle and the last one? Ex: https://jsfiddle.net/x1f4oLrn/ – Tiago Dec 17 '21 at 16:57

Rubel · Answer 2 · 2021-12-17T14:07:06.037

0

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;
    }

edited Dec 17 '21 at 14:07

answered Dec 17 '21 at 13:59

Rubel

1,255
14
18

score -2 · Answer 3 · answered Dec 17 '21 at 15:10

-2

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

answered Dec 17 '21 at 15:10

Ashraf Maniyar

1

As Tiago mentions in the comments under the question, the selector needs to allow for Bootstrap size classes with values other than `6`. – TylerH Dec 17 '21 at 15:13
You need to add details and how this code works as well. You can't just type some code. You need to give a proper explanation. – Shambhav Dec 17 '21 at 15:16

Identify previous CSS

3 Answers3