CODEWITHSUNDEEP
csscss-selectors
Gordon
Gordon

Reputation: 6863

CSS: select LI in multiple parent UL classes

I have defined two <ul> classes, px_p and px_s. Now I want to style all <li> elements that are contained within either <ul class="px_p"> or <ul class="px_s"> elements. I had thought that ul.px_p, ul.px_s li {} would work, but no dice. I tried ul.px_p li, ul.px_s li {} as well. The issue is that the <li> styling is 

ul.px_p, ul.px_s li {
  margin: 0.1em;
}

and .1em is being applied to the whole <ul> element, as well as the nested <li> elements. I just want the <li> elements, as the <ul> has a much larger bottom margin to graphically separate it from the following elements. The difference between px_p and px_s is _p is Primary, and has a bullet, while _s is secondary and has no bullet, it just indents more.

Upvotes: 1

Views: 1173

Answers (1)

Martin
Martin

Reputation: 16423

The selector should be like this:

ul.px_p > li,
ul.px_s > li {
  ...
}

Using the > selector will only match li elements whose parent elements are ul.px_p or ul.px_s.

This is important, given that ul.px_p li will match any descendednt li element ul.px_s. This will include nested elements which the style should not apply to.

As an side note, sometimes when working in browsers, a cached version of CSS is used and changes you have made may not be reflected. Force a full refresh of the browser page which should reload the full content using CTRL+F5.

Upvotes: 1

Related Questions