:first-child not working on label (hidden radio button)

Question

I'm styling radio buttons (hiding them and using the labels as buttons), and trying to put border radius on first-child, but it does not respond as expected, or I'm doing it wrong.

How can I achieve left border radius on first label?

See it in action here > http://jsfiddle.net/sthrc57f/

HTML:

<input type="radio" name="radios" id="radioone" value="one">
<label for="radioone">radio 1</label>
<input type="radio" name="radios" id="radiotwo" value="two" checked="checked">
<label for="radiotwo">radio 2</label>

CSS:

input[type=radio] {
    display:none;
}

input[type=radio] + label {
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 0.5em 2em 0.5em 2em;
    background-color: #eeeeee;
    color: #bbbbbb;
}

input[type=radio] + label:first-child  {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    -webkit-border-radius: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -o-border-top-left-radius: 7px;
    -o-border-bottom-left-radius: 7px;
    -moz-border-top-left-radius: 7px;
    -moz-border-bottom-left-radius: 7px;
}

input[type=radio]:checked + label { 
    background-color: green;
    color: white;
}

input[type=radio]:checked + label:before {
    content: "✓ ";
}

I have tried many combinations:

input[type=radio] label:first-child
input[type=radio]:first-child label
label:first-child

and more. No luck

I suspect maybe it's because the radio button itself is hidden so the first label can't be targeted like this?

EDIT: Solved. Here is the working edition: http://jsfiddle.net/sthrc57f/2/

@TylerH enlighten me. first-child should target the first occurrence of the assigned element (before :first-child), no? — mowgli, Aug 19 '14 at 18:44
`first-child` looks for the element to which it is appended that is also the first element of its parent container. In this case, the only `first-child` element you have is your first `input` element. — TylerH, Aug 19 '14 at 18:47
It's confusing ;) How would you set :first-child or :first-of-type in this? To target the first label — mowgli, Aug 19 '14 at 18:48
Ok, I my real form I have more fields and labels, so that won't do.. Maybe I should wrap the radio buttons in a span and target that — mowgli, Aug 19 '14 at 18:53
See my answer. If you have more markup in your production page, it might indeed be a good idea to wrap them in container elements. — TylerH, Aug 19 '14 at 18:55

score 8 · Accepted Answer · edited May 23 '17 at 12:23

8

I guess I'll put my responses in an answer here in case they help others as well. That's not how :first-child works; there's no label element that is a first child in your markup. Perhaps you meant :first-of-type?

label:first-of-type {
    border-radius: 7px;
}

JSFiddle Example

edited May 23 '17 at 12:23

Community

1
1

answered Aug 19 '14 at 18:54

TylerH

20,799
66
75
101

Yes. This works. I had to put a surrounding `span` arround it all and then use `input[type=radio] + label:first-of-type`. I guess a parent was missing – mowgli Aug 19 '14 at 18:58
Yes of course ;) Here is the result http://jsfiddle.net/sthrc57f/2/ Please upvote my question if it was a good quality question. If not, then ok.. :/ – mowgli Aug 19 '14 at 19:04

:first-child not working on label (hidden radio button)

1 Answers1