CODEWITHSUNDEEP
htmlcss
StealthTrails
StealthTrails

Reputation: 2415

unable to target a button tag inside div

I have html structure like this

<div class="buttons controls">
    <a href="#B"><button>Next</button></a>
    <a href="#Z"><button>Previous</button></a>
</div>

I am targetting the buttons 

.controls>button
.buttons.controls>button

but it is not working. I want to know why??

Upvotes: 1

Views: 3440

Answers (2)

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

Well, because your <button> element is not a child of div.controls. You could use .controls a > button or .controls > a > button

A > E

Any E element that is a child (i.e. direct descendant) of an A element

MDN Documentation - Selectors based on relationships

EDIT:

.controls > a > button is more specific. So it will only be applied when your HTML looks like this 

<div class="buttons controls">
    <a href='#'>
        <button>MyButton</button>
    </a>
</div>`

.controls a button is a more general selector, so it would also be applied with a HTML like this -

<div class="buttons controls">
    <div class="myDiv">
        <a href="#H">
            <button>MyButton</button>
        </a>
    </div>
</div>

As you see, you could also specify a div as parent of <a> element and the CSS-Style will still be applied.

Upvotes: 2

nykc
nykc

Reputation: 185

Because .button is inside of the anchor therefore it is not a direct descendant of the .controls class as you are trying to do in your css

try this:

.controls .button {
   /* style here */
}

or like stated in the answer above

.controls > a > button {
  font-size: 20px;
}

Upvotes: 1

Related Questions