How to add multiple classes to one rule?

this for example does not work ???

.menu-item-19,
.menu-item-118,
.menu-item-17,
.menu-item-16 {
	display: inline-block;
	position: relative;
	padding-bottom: 3px;
}

why are you targetting individual menu items?

You need to do the following.

.class-a .classb .classc {
    css rules
}

or you can do this

.class-a {
.class-b {
.class-c {
    css rules
}
}
}

Hi I’ve tried all suggestions and it still doesn’t work.

Here’s the site: https://lennybeadle.com

and it’s currently using this code:

.menu-item-19{
.menu-item-118{
.menu-item-16{
.menu-item-17{

	display: inline-block;
	position: relative;
	padding-bottom: 3px;

}
}
}
}

.menu-item-19:after {
.menu-item-118:after{
.menu-item-16:after{
.menu-item-17:after{

	content: '';
	display: block;
	margin: auto;
	height: 3px;
	width: 0px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
}
}
}
}

.menu-item-19:hover:after {
.menu-item-118:hover:after{
.menu-item-16:hover:after{
.menu-item-17:hover:after{

	width: 100%;
	background: #fff;
}
}
}
}

alchymyth I am very new to CSS so I could not get it to work with the entire header so instead I just targeted the individual links.

the code from https://www.ads-software.com/support/topic/how-to-add-multiple-classes-to-one-rule?replies=5#post-7063168 is higly invalid;

review https://www.w3schools.com/css/css_selectors.asp for ‘grouping selectors’

you should not be able to irreversible break the site by adding any invalid CSS to any stylesheet.

if you have broken the original style.css of your theme, upload a new one from a fresh copy of the theme – as your theme is not from https://www.ads-software.com/themes/, you might need to contact the theme’s developer for help.

then, for any customization, work either with a ‘custom CSS’ plugin https://www.ads-software.com/plugins/search.php?q=custom+css or via a child theme https://codex.www.ads-software.com/Child_Themes.

Thanks I’ll take a look now.

Yes I had a backup luckily, I’ve just fixed the site now.

Ok thanks for that link I learned quite a bit. After reading I changed the target to:

a{
}

because I realised it was in an <a> tag. So I changed it but now it seems to have change a few unwanted things on my page. If I inspect element I can see it’s an <a> tag how do I change the letter so it won’t change all the other things?

Yes finally figured it out!

.header-menu a{

}