You mean two classes? "Chain" the selectors (no spaces between them):
.class1.class2 {
/* style here */
}
This selects all elements with class1 that also have class2.
In your case:
li.left.ui-class-selector {
}
Official documentation : CSS2 class selectors.
As akamike points out a problem with this method in Internet Explorer 6 you might want to read this: Use double classes in IE6 CSS?
Answer from Felix Kling on Stack OverflowUnusedCSS
unused-css.com › blog › css-multiple-class-selectors
CSS Multiple Class Selectors | UnusedCSS
June 16, 2022 - Multiple CSS class selectors add further value when the states of different elements have partially shared styles. Instead of repeating the style code, we can share the overlapped ones and override the unique ones.
W3Schools
w3schools.com › cssref › sel_class.php
CSS .class Selector
The element.class selector selects the specified elements with the specified class attribute value. To select only one type of elements with a specific class, write the element name, then a period (.) character, followed by the class attribute value (look at Example 1 below). Tip: HTML elements can also refer to more than one class (look at Example 2 below).
Select multiple elements with the same class. [help]
Hey OP. You got a good answer out of u/theKrevFox - what they said definitely works. I just wanted to let you know that if you want to ONLY select h1,h2,h3,h4,h5,h6,p,li when it has .newclass, then there's a really cool selector that made it into modern browsers (not IE) fairly recently. It's called :is(). So you can do: .newclass:is(h1,h2,h3,h4,h5,h6,p,li) { background-color: yellow; } and only those items will be yellow. What's the difference? In u/theKrevFox , if you put .newclass on something that ISN'T a h1,h2,h3,h4,h5,h6,p,li, it'll have a yellow background regardless. In this example, it limits the yellow background to the chosen elements only. More on reddit.com
11
5
May 5, 2022Correct usage of classes and other selectors
An element can have ONLY ONE attribute "class". Multiple classes must be divided by a space (not by a dot), for example class="click-me-1 yellow bold". In the stylesheet you need to write ".click-me-1.yellow" (without space). If you use space browser finds the first element with class "click-me-1", then find in this element another element (child element) with class "yellow". More on reddit.com
7
2
June 24, 2024What is the difference between 2 classes that has whitespace between and the ones that doesn't have.
This is a due to the CSS selectors. When you write the two class names with white space between them, CSS is looking for all elements with classes “expandMoreContent” with a child of class “expand-active”. Without the whitespace, CSS is looking for an element that has both classes. In VSCode, you should be able to hover your cursor over the CSS selector, and there will be a little diagram demonstrating what element you are selecting within the DOM tree. More on reddit.com
5
3
May 11, 2022Is adding many classes to an element good practice?
Some people use and like utility classes. Personally I like to bundle css properties into a class. I'm not really fond of utility classes. IMHO it looks the same as inline styles, but you're not using them as they're not good practice. More on reddit.com
11
2
June 5, 2023Videos
04:28
Multiple classes for more efficient CSS - YouTube
07:11
Multiple CSS Classes is so Easy - YouTube
00:22
How to use Same Style to the Multiple Class in CSS - YouTube
04:38
One tag multiple classes | CSS explained | #SmartCode - YouTube
11:46
How to Create a CSS Class in HTML - How CSS Classes Work - Beginner ...
26:37
How to Use Classes and IDs Properly
Top answer 1 of 3
735
You mean two classes? "Chain" the selectors (no spaces between them):
.class1.class2 {
/* style here */
}
This selects all elements with class1 that also have class2.
In your case:
li.left.ui-class-selector {
}
Official documentation : CSS2 class selectors.
As akamike points out a problem with this method in Internet Explorer 6 you might want to read this: Use double classes in IE6 CSS?
2 of 3
33
Chain selectors are not limited just to classes, you can do it for both classes and ids.
Classes
.classA.classB {
/*style here*/
}
Class & Id
.classA#idB {
/*style here*/
}
Id & Id
#idA#idB {
/*style here*/
}
All good current browsers support this except IE 6, it selects based on the last selector in the list. So ".classA.classB" will select based on just ".classB".
For your case
li.left.ui-class-selector {
/*style here*/
}
or
.left.ui-class-selector {
/*style here*/
}
CSS-Tricks
css-tricks.com › multiple-class-id-selectors
Multiple Class / ID and Class Selectors | CSS-Tricks
September 28, 2022 - Each type of selector has a different value, and when multiple selector types appear in one style— for example the descendent selector #banner p—the values of all the selectors used are added up.” · example: selector id class tag total p 0 0 1 1 .byline 0 1 0 10 p.byline 0 1 1 11 #banner 1 0 0 100 #banner p 1 0 1 101 #banner .byline 1 1 0 110 a:link 0 1 1 11 p:first-line 0 0 2 2 h2 strong 0 0 2 2 #wrapper #content .byline a:hover 2 2 1 221
SheCodes
shecodes.io › athena › 20479-how-to-apply-css-to-multiple-classes
[CSS] - How to Apply CSS to Multiple Classes - SheCodes | SheCodes
Learn how to apply CSS to multiple classes by separating them with commas. This makes styling multiple classes more efficient. ... I have several images in html. I want to target each one in CSS.
GeeksforGeeks
geeksforgeeks.org › css › how-to-apply-styles-to-multiple-classes-at-once
How to apply styles to multiple classes at once ? - GeeksforGeeks
September 26, 2024 - Applying styles to multiple classes at once means using a single CSS rule to style multiple elements that share different class names. This can be achieved by separating class selectors with commas, allowing for efficient styling of various ...
GeeksforGeeks
geeksforgeeks.org › css › how-to-apply-two-css-classes-to-a-single-element
How to Apply Two CSS Classes to a Single Element? - GeeksforGeeks
November 29, 2024 - If you want to style an element that has both classes, you can combine the class selectors without spaces. This style will only apply to elements that have both classes. Note: In the CSS selector, there is no space between the class names.
Scaler
scaler.com › home › topics › css multiple classes
CSS Multiple Classes- Scaler Topics
January 1, 2024 - Other frequent causes of cross-browser ... CSS declarations for the same property by separating them with commas or by the element name with the class name joined by a dot(.)....
Reddit
reddit.com › r/css › select multiple elements with the same class. [help]
r/css on Reddit: Select multiple elements with the same class. [help]
May 5, 2022 -
I have this ancient project that I take a look from time to time. I'm not a webdev, I can move my way with php and backend stuff, but frontend is a little bit daunting to me.
I was checking the mainpage with webdev tools and found that my "plain" styles were being overridden by an override that is only supposed to kick-in for a certain class.
These are my original styles
h1,h2,h3,h4,h5,h6,p,li {
background-color: blue;
}But let's say I want to change the background-color when them belong to a certain class
.newclass h1,h2,h3,h4,h5,h6,p,li {
background-color: yellow;
}And this is the markup
<h1>Hello</h1> <h2>World</h3> <p>I'm Here!</p> <p>This should be blue</p> <p class="newclass">and this yellow</p> <h1 class="newclass">still can't</h1>
I'm expecting for lines 5 and 6 to have a yelllow background and the all the others a blue background.
But 1 and 6 are blue and 2 to 5 are yellow.
My thought was that space is an AND and comma is an OR and supposedly I'm asking for all the comma separated elements to gain the new attribute IF AND ONLY IF them match the class before the space.
What am I doing wrong?
I tried to google it but couldn't figure it out.
Here is a code pen with the same example
Top answer 1 of 5
2
Hey OP. You got a good answer out of u/theKrevFox - what they said definitely works. I just wanted to let you know that if you want to ONLY select h1,h2,h3,h4,h5,h6,p,li when it has .newclass, then there's a really cool selector that made it into modern browsers (not IE) fairly recently. It's called :is(). So you can do: .newclass:is(h1,h2,h3,h4,h5,h6,p,li) { background-color: yellow; } and only those items will be yellow. What's the difference? In u/theKrevFox , if you put .newclass on something that ISN'T a h1,h2,h3,h4,h5,h6,p,li, it'll have a yellow background regardless. In this example, it limits the yellow background to the chosen elements only.
2 of 5
2
Lots of great answers here to solve your problem. Just wanted to share some more advanced tooling to do similar. https://css-tricks.com/almanac/selectors/i/is/ https://css-tricks.com/almanac/selectors/i/has/ https://css-tricks.com/the-css-has-selector/
SheCodes
shecodes.io › athena › 10796-target-multiple-classes-in-css
[CSS] - Target Multiple Classes in CSS - SheCodes Athena - | SheCodes
Learn how to use multiple classes in CSS to target elements in HTML using class selectors.
SheCodes
shecodes.io › athena › 3962-styling-an-element-with-multiple-classes-in-css
[CSS] - Styling an Element with Multiple Classes in CSS - | SheCodes
Learn how to use the CSS class selector to style an HTML element with multiple classes so that the most recent class takes precedence.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Guides › Selectors › Selectors_and_combinators
CSS selectors and combinators - MDN Web Docs
Multiple pseudo-classes can be combined to create compound selectors. When combining a pseudo-class into a compound selector with a type or universal selector, the pseudo-class must follow the type selector or universal selector, if present. Not all CSS selectors are defined in the CSS selectors ...
Khan Academy
khanacademy.org › computing › computer-programming › html-css › more-css-selectors › pt › using-multiple-css-classes
Using multiple CSS classes | More CSS selectors
Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, etc. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.
Bennadel
bennadel.com › blog › 680-defining-a-css-selector-that-requires-a-multi-class-union.htm
Defining A CSS Selector That Requires A Multi-Class Union
April 18, 2020 - Personally I never needed to select both classes together tough. ... While I have never done that before (and didn't know that I could), it is one of those things where when I see it, I know that I could have used it somewhere :) ... Wow, that is a VERY NICE feature I didn't know of. Too bad it doesn't work in IE6, but at least it makes my CSS for the other browsers a LOT MORE POWERFUL.
Reddit
reddit.com › r/css › correct usage of classes and other selectors
r/css on Reddit: Correct usage of classes and other selectors
June 24, 2024 -
I started to learn CSS about two days ago. However, I am still a little confused on the TON of different selectors that still yield the same result even with different methods. I am aware that classes can be named anything? If I remember correctly.
(The provided screenshots show my code. The first two are mine. The last two are the Odin Project's.)
I just want to know from the more seasoned veterans here how my coding could be better and/or more efficient in the future. And it would help a lot if some helpful links/tips were dropped to better understand CSS and its varying usage of selectors, properties, and values. Thank you
Top answer 1 of 5
3
An element can have ONLY ONE attribute "class". Multiple classes must be divided by a space (not by a dot), for example class="click-me-1 yellow bold". In the stylesheet you need to write ".click-me-1.yellow" (without space). If you use space browser finds the first element with class "click-me-1", then find in this element another element (child element) with class "yellow".
2 of 5
2
Multiple HTML classes are separated by spaces. I'm assuming you wanted both classes, so instead of class="click-me-1.yellow" it should be class="click-me-1 yellow" Classes can be named ALMOST anything. They can't start with a number (so 1-click-me would not work, but yours is fine because it ends in a number instead. Just FYI.). And right now you have a class with a dot in it (click-me-1.yelllow). I don't know if that's allowed or not but you probably shouldn't do it just because it's confusing. The CSS selector to target an element with multiple classes is .class1.class2.class3.class..... with no spaces. Spaces will target a child, so .click-me-1 .yellow is targeting a child .yellow inside a parent .click-me-1. Your HTML does not contain that combination of elements so the rule does nothing. The CSS selector for targeting your element with both classes should be .click-me-1.yellow without any spaces. On the the other hand if you wanted to target elements whose class list contains one class OR another class (either one of two classes but doesn't have to be both), you'd use a comma between. (And you can add a space for readability). So if you wanted to target elements with the class click-me-1 OR yellow, it would be .click-me-1, .yellow {... You can't have multiple class properties on one HTML element. You would never need such a thing since you can string as many classes as you want, separated by spaces, inside one class="....". You need to remove your multiple class properties on your elements and just use one per element. tl;dr: a CSS selector targeting multiple classes at once can not be separated with spaces. Separating with spaces is the wrong selector - that will target children. you can't have multiple class properties on an HTML element you probably shouldn't use a dot in a class name multiple class names are separated by spaces in the HTML property
JavaScript in Plain English
javascript.plainenglish.io › css-multiple-class-selector-explained-with-the-help-of-code-examples-ecbd30f7ddf7
CSS Multiple Class Selector Explained With the Help of Code Examples | JavaScript in Plain English
May 20, 2022 - In an HTML document, the class value can contain one word, or it can have multiple words separated by spaces. To work with a class value that has a single word. You can use the general class selector or the element-specific class selector.
ThoughtCo
thoughtco.com › grouping-multiple-css-selectors-3467065
Grouping Multiple CSS Selectors in One Style Property
May 18, 2025 - This example groups a class selector ... specified) with an ID attribute of sub. You can group any number of CSS selectors, including selectors that are single words and compound selectors....
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Selectors › Class_selectors
Class selectors - CSS - MDN Web Docs - Mozilla
<!-- The next two paragraphs have class attributes that contain characters which must be escaped in CSS --> <p class="item?one">This paragraph has a pink background.</p> <p class="123item">This paragraph has a yellow background.</p> ... .red { color: #ff3333; } .yellow-bg { background: #ffffaa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #7777ff; } ... /* In the next two rules, the class attributes must be escaped */ .item\?one { background-color: pink; } .\00003123item { background-color: yellow; } The class selectors in the following rules are not valid CSS identifiers, and will be ignored.
Quora
quora.com › Is-it-possible-to-add-multiple-classes-in-CSS-with-just-one-element
Is it possible to add multiple classes in CSS with just one element? - Quora
In CSS, you can target an element with multiple classes by chaining the class selectors together with a comma, like this:
Web4college
web4college.com › questions › css-multiple-classes-selector.php
css multiple classes selector
CSS class selectors select those elements who have class attribute with the value being matched to the class selector. In this lesson, We'll see What are class selectors?. We will study the behavior of multiple classes for an element. And it is also important to study the behavior of one class ...