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
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!