:last-child not working? :first-child does

Curious as to why the :last child code doesn’t work with this:

.signupform input[type="radio"]:first-child + label {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.signupform input[type="radio"]:last-child + label {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

<div class="formBody"><input type="radio" id="Sex0" value="Male" name="form[Sex]"><label for="Sex0">Male</label><input type="radio" id="Sex1" value="Female" name="form[Sex]"><label for="Sex1">Female</label><span class="formValidation"><span class="formNoError" id="component1956">Male/Female</span></span></div>

Any clues?

input type=“radio” is not the last child. It’s the third child in your code snippit. The last-child is a span.

You could use “:last-of-type”

(Please don’t post minified code. It’s hard to read. At least one of us has to unminify it to make sense out of it. )

1 Like

Okay, so I changed the

input[type="radio"]:last-child

to

input[type="radio"]:last-of-type

and that worked beautifully. Thank you, ronpat!

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.