Nesting in CSS?

• 0

  <div class="products__sort_type products__sort">
            <button class="products__sort-item active">
              Headphones
            </button>
            <button class="products__sort-item">
              Earphones
            </button>
            <button class="products__sort-item">
              Speakers
            </button>
          </div>
          <div class="products__sort_color products__sort">
            <h3 class="products__text">
              Colors
            </h3>
            <div class="products__sort-items">
              <button class="products__sort-item active">
                Black
              </button>
              <button class="products__sort-item">
                Red
              </button>
              <button class="products__sort-item">
                Green
              </button>
              <button class="products__sort-item">
                Yellow
              </button>
            </div>
          </div>

  
  

  .products__sort-item {...}
  .products__sort_type .products__sort-item {...}
  .products__sort_color .products__sort-item {...}

  
  Or write an additional class for .products__sort_color .products__sort-item

  CSS Anonymous, May 23, 2020

---

0 Answers