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

Implementing a simple student information management system based on VUE

Table of contents 1. Main functions 2. Implementa...

Windows Service 2016 Datacenter\Stand\Embedded Activation Method (2021)

Run cmd with administrator privileges slmgr /ipk ...

Detailed explanation of javascript knowledge points

Table of contents 1. Basic Introduction to JavaSc...

About the implementation of JavaScript carousel

Today is another very practical case. Just hearin...

Why is it not recommended to use index as key in react?

1. Compare the old virtual DOM with the new virtu...

W3C Tutorial (6): W3C CSS Activities

A style sheet describes how a document should be ...

How to generate a unique server-id in MySQL

Preface We all know that MySQL uses server-id to ...

MySQL 5.7.24 installation and configuration graphic tutorial

This article shares the installation and configur...

HTML+Sass implements HambergurMenu (hamburger menu)

A few days ago, I watched a video of a foreign gu...

Writing methods that should be prohibited in native JS

Table of contents Block-level functions Directly ...

Implementation process of row_number in MySQL

1. Background Generally, in a data warehouse envi...

A simple example of mysql searching for data within N kilometers

According to the coefficient of pi and the radius...