CSS select only elements that dont have a class starting with this - css-selectors

Question

Hi,
I have this html code:
<ul>
<li>
Locations
<ul class="submenu1">
<li>London</li>
<li>York</li>
</ul>
</li>
<li>
About
<ul class="submenu2">
<li>Site</li>
<li>Contact</li>
</ul>
</li>
</ul>
I want to select all the a elements EXCEPT the ones that are children to the submenu class elements.
I tried like this:
ul li a:not([class^="submenu"] a) {background-color:darkkhaki;}
but it wont work. Whats the right selector for this case?
Thank you.

Answer 1

Hello dear CSS friend!
In other words, taking your example, you want to select "Locations" and "About" links but not the others.
(Kind of) dirty one
The easier to understand solution is to apply styles to all a then remove the styles to the others.
li > a {
/* Styles you want to apply */
}
[class^="submenu"] a {
/* Remove styles here */
}
It's always dirty to place styles then remove them, because it's less maintainable and a bit more heavy. But it will do the job.
Nicer solution
In your case, the submenu links are the only child of your li elements. That's why I would try to target the links that are not only child of your list item to style those, like that.
li a:not(:only-child) {
/* Your styles here */
}
For more information on :only-child pseudo class, I leave you with some reading :)
https://developer.mozilla.org/fr/docs/Web/CSS/:only-child
Don't hesitate if you have question, and have fun!

Answer 2

Option 1:
This will work:
ul li a {
background-color: darkkhaki;
}
ul ul li a {
background-color: transparent;
}
Just reset the styles on the elements you don't want styled.
Option 2:
If you have a container, for example a <div id="menu"> you can do:
#menu > ul > li > a {
background-color: darkkhaki;
}