How to target all tags inside parent

user_14094112 0
Viewed 238

I am trying to write sass that will apply on both buttons inside two separate divs, but all the style that I write apply only to one button, is there any way I can target all buttons? This is my html:

<div class="main-cta-buttons">
                <div class="subscribe-form">
                    <div>
                        <button class="btn btn-primary btn-lg btn-xs-block test" style="min-width: 220px;" aria-label="become a marketer">Become a Marketer</button>
                    </div>
                    </div>
                        <button class="btn btn-primary btn-lg btn-xs-block test" style="min-width: 220px;" aria-label="become a partner">Become a Partner</button>
                    </div>
                </div>
            </div>

and this is my sass:

.main-cta-buttons{
display: flex;
// align-items: center;
justify-content: space-evenly;
max-width: 70rem;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
@media(max-width: 736px){
    flex-direction: column;
    max-width: 100%;
}

.subscribe-form{
    > div {
        @media(max-width: 736px){
            margin-bottom: 2.6rem;
        } 
    }
    & button {
        text-align: center;
        justify-content: center;
        display: flex;
    }
}

}

I tried pretty much anything I could think of, but these buttons styles only show up on the first button. Thank you

sass css html
2 Answers

you can try using * and every child will get css props

div.main-cta-buttons * {
// CSS Property
}
user_108764840

I would write the following (S)CSS (taking into account the HTML you provided):

.subscribe-form .btn { styles be here }

That way you can style both buttons in the subscribe-form container.

P.S.: A note regarding your use of aria-label. The information is already in the button as text, so putting the same text as a value for aria-label on the button makes the text redundant. In the worst case it would be read twice by screen reader software or other assistive technology.

user_23326550
Related