CODEWITHSUNDEEP
css
Suffii
Suffii

Reputation: 5784

Not Able to Select First Button In a Div In CSS

Can you please take a look at this code and let me know why I am not able to select the first Button in the div:

.button-group-h button:first-child{
  background-color:yellow;
} 

<ul class="button-group-h">
    <li><button class="btn button">Button</button></li>
    <li><button class="btn button">Button</button></li> 
    <li><button class="btn button">Button</button></li>
</ul>

the .button-group-h button:first-child selector in fact selecting and affecting on all of three buttons. Thanks

Upvotes: 0

Views: 792

Answers (1)

j08691
j08691

Reputation: 207973

Use the :first-child on the <li>, not the button. The <li> elements are children of the <ul>, not the buttons:

.button-group-h li:first-child button{
    background-color:yellow;
}

jsFiddle example

Upvotes: 3

Related Questions