All geek questions in one place

Is it possible to set CSS for combined classes?

Say I have the following:

tr {
    background: #fff;
}

tr.even {
    background: #eee
}

tr.highlight {
    background: #fec;
}

Is it possible to specify a 4th background ( #fea) instead of highlightjust overwriting even?

<tr class="even highlight">
  <!-- ... -->
</tr>

Once CSS3 is supported, it :nth-childcan work. But anything available at the same time?

tr { /* ... */ }

tr:nth-child(even) { /* ... */ }

tr.highlight { /* ... */ }

tr.highlight:nth-child(even) { /* ... */ }
+3
source share
3 answers

You can do it:

tr.even.highlight { ... }

However, IE6 is not known.

+14
source

The key to assigning multiple classes is to make sure your CSS wears out gracefully in all browsers. In this case, this would be a good solution:

tr.even.highlight { background:#fea }

In modern browsers that recognize this, you will get this 4th color and it will be applied to:

<tr class='even highlight'>
...
</tr>

, IE6.

+2

IE6 , . , , , , .

, - .. 2 :

<html>
    <head>
        <style type="text/css">
            .style1 {
                color:red
            }
            .style1.selected {
                color:blue
            }
        </style>
    </head>
    <body>
        <p class="style1">paragraph 1</p>
        <p class="style1 selected">paragraph 2</p>
    </body>
</html>

, , , 1 2 :

<html>
    <head>
        <style type="text/css">
            .style1.selected {
                color:blue
            }
            .style1 {
                color:red
            }
        </style>
    </head>
    <body>
        <p class="style1">paragraph 1</p>
        <p class="style1 selected">paragraph 2</p>
    </body>
</html>

, , , , , , , .

So you can make your css classes behave as you expect by ordering them. But this may not work in all cases, depending on how you want the classes to be applied. The only sure way to fix this in IE6 is to use javascript to add and remove CSS classes for certain events, which is a bit awkward.

0
source

Source: https://habr.com/ru/post/1702395/

More articles:


All Articles