Question

if i specify like

.a ul{}
.a ul li{}

and

.b ul{}
.b ul li{}

Will the properties of ul in .b be totally separated from properties of ul of .a? or they will be common?

I want that the the styles of ul stays totally separated from style of ul in .b without using div id. thanks.

Answer 1

As long as you ensure in your HTML that you don’t have class="a" elements inside class="b" elements or vice versa, your selectors will apply to separate <ul>.

They will only be common for <ul>s in both .a and .b if:

• You group the selectors, like this:

  .a ul, .b ul {}
  .a ul li, .b ul li {}
  

• You declare the exact same style rules for both selectors

• In your HTML, <ul> is contained within elements of both classes (whether it’s class="a b" or .a inside .b or .b inside .a), for example:

  <div class="a b">
      <ul><li>Item</li></ul>
  </div>
  
  <div class="b">
      <div class="a">
          <ul><li>Item</li></ul>
      </div>
  </div>
  
  <div class="a">
      <div class="b">
          <ul><li>Item</li></ul>
      </div>
  </div>
  

  Note that this only fully applies if the second bullet is also true; you may not get the results you expect due to the effects of the cascade.