Example code of how CSS matches multiple classes

Example code of how CSS matches multiple classes

CSS matches multiple classes

The following HTML tag li, class has open style. My requirement is to change the background color to white only when open and active exist at the same time

<li id="menu_268098" title="Account Information Query" class="open">
        <li id="menu_270008" class="nav_sec" title="Account Balance Query">
            <a href="#/p/payment.search.account_balance" class="dropdown-toggle">
                <span class="nav-title">Account Balance Inquiry</span>
            </a>
        </li>
    </ul>
</li>
<li id="menu_268098" title="Account Information Query" class="open active">
        <li id="menu_270008" class="nav_sec" title="Account Balance Query">
            <a href="#/p/payment.search.account_balance" class="dropdown-toggle">
                <span class="nav-title">Account Balance Inquiry</span>
            </a>
        </li>
    </ul>
</li>

The css can be written like this:

li.open.active{
  background-color: #fff;
}

Note: There should be no space between .open.active

Summarize

This is the end of this article about how to match multiple classes in CSS. For more information about how to match multiple classes in CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Fixed table width table-layout: fixed

>>:  5 Reasons Why Responsive Web Design Isn’t Worth It

Recommend

Complete steps to install MySQL 8.0.x on Linux

MySQL Introduction to MySQL MySQL was originally ...

11 Examples of Advanced Usage of Input Elements in Web Forms

1. Cancel the dotted box when the button is press...

About the problem of dynamic splicing src image address of img in Vue

Let's take a look at the dynamic splicing of ...

A practical record of troubleshooting a surge in Redis connections in Docker

On Saturday, the redis server on the production s...

Realizing tree-shaped secondary tables based on angular

First look at the effect: Code: 1.html <div cl...

In-depth understanding of uid and gid in docker containers

By default, processes in the container run with r...

Solve the error "Can't locate ExtUtils/MakeMaker.pm in @INC"

When installing mha4mysql, the steps are roughly:...

9 Tips for Web Page Layout

<br />Related articles: 9 practical suggesti...

Application of anchor points in HTML

Set Anchor Point <a name="top"><...

WeChat applet implements simple calculator function

WeChat applet: Simple calculator, for your refere...

WeChat applet implements a simple calculator

WeChat applet's simple calculator is for your...

Solution to the img tag problem below IE10

Find the problem I wrote a simple demo before, bu...

Detailed explanation of writing multiple conditions of CSS: not

The :not pseudo-class selector can filter element...

mysql8 Common Table Expression CTE usage example analysis

This article uses an example to describe how to u...