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 the search function in the html page

Recently I've been working on a framework tha...

Detailed tutorial on installing Hbase 2.3.5 on Vmware + Ubuntu18.04

Preface The previous article installed Hadoop, an...

Execute the shell or program inside the Docker container on the host

In order to avoid repeatedly entering the Docker ...

Implementation of MySQL custom list sorting by specified field

Problem Description As we all know, the SQL to so...

Introduction to the use of anchors (named anchors) in HTML web pages

The following information is compiled from the Int...

What are the file attributes of crw, brw, lrw, etc. in Linux?

What is a file? All files are actually a string o...

HTML table mouse drag sorting function

Effect picture: 1. Import files <script src=&q...

This article will show you how to use SQL CASE WHEN in detail

Table of contents Simple CASEWHEN function: This ...

React entry-level detailed notes

Table of contents 1. Basic understanding of React...

TypeScript decorator definition

Table of contents 1. Concept 1.1 Definition 1.2 D...

Installation tutorial of mysql 8.0.11 compressed version under win10

This article shares the installation tutorial of ...

Pitfalls based on MySQL default sorting rules

The default varchar type in MySQL is case insensi...