can we combine two rule into single rule in css?

Question

I have two senario class started from icn- and in-betwen icn- .Both have same properties.can we add one selector or regex which work in both cases ?

 .f20 [class^="icn-"]:before,.f20 [class*=" icn-"]:before {
            font-family: 'icons' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

Any reason why icn is not a class? you can select based on multiple classes. Edit: for example if you make icn-whatever into two classes icn and whatever, then where you had .icn-whatever you can put .icn.whatever (notice no spaces). And that, would, of course, allow you to just select .icn separatedly if you needed. — Theraot
– Theraot, Commented Nov 10, 2020 at 7:50

cloned · Accepted Answer · 2020-11-10 07:57:45Z

0

In your case you can write the following:

.f20 [class*="icn-"]:before {
   color: pink; /*whatever you want goes here*/
}

This selects any icn- class if it is either at the beginning or somewhere else. Note this also selects something like this-icn-class since it only checks for icn- and doesn't care what character is in front.

answered Nov 10, 2020 at 7:57

cloned

6,9154 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

can we combine two rule into single rule in css?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related