Как я могу покрыть тег внутри класса sass, который является вложенным

Question

Я пытаюсь нацелиться на тег H3 в этом классе sass &.featured, и я не понимаю, как его кодировать? Возможно, я неправильно прочитал документы из трюков CSS?

tag<tag

Frontend

<div class="col-6 col-12-narrower">
        <section>
          <header>
            <a class="image featured" href="/index.html"><h3>test one</h3></a>
          </header>
          <p>Sed tristique purus vitae volutpat commodo suscipit amet sed nibh. Proin a ullamcorper sed blandit. Sed tristique purus vitae volutpat commodo suscipit ullamcorper sed blandit lorem ipsum dolore.</p>
        </section>
      </div>

Sass

/* Image */

    .image {
        border: 0;
        position: relative;

        &:before {
            content: '';
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }

        &.fit {
            display: block;

            img {
                display: block;
                width: 100%;
            }
        }

        &.featured {
            display: block;
            margin: 0 0 2em 0;
            background-image: linear-gradient(to bottom right, rgb(187, 171, 179), #3b3639);
            padding:50px;

            a>h3 {
                font-size: x-large;
                color: white;
            }
        }

        &.logo {
            display: block;
            margin: 45px 0px .6em 0;

            img {
                display: inline;
                max-width: 100%;
                height: auto;
            }
        }
    }

Answer 1

Ваш код в соответствии с a>h3 означает .featured a h3, но вам нужно .featured h3 (a.featured h3).

Попробуйте

    &.featured {
        display: block;
        margin: 0 0 2em 0;
        background-image: linear-gradient(to bottom right, rgb(187, 171, 179), #3b3639);
        padding:50px;

        h3 {
            font-size: x-large;
            color: white;
        }
    }