How to fix css3 pseudo class nth-child

Question

How I can make left borders rounded? I have this code:

.container {
    margin-top: 25px;
}
.btn-group-radio input[type=radio] {
    display: none;
}
.btn-group-radio input[type=radio]:checked + .btn {
    color: #333333;
    background-color: #e6e6e6;
    *background-color: #d9d9d9;
    background-color: #cccccc \9;
    background-color: #e6e6e6;
    background-color: #d9d9d9 \9;
    background-image: none;
    outline: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group-radio .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.btn-group-radio .btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

    <div class="container">
        <div class="btn-group btn-group-justified btn-group-radio" role="group" id="id_offer">

            <input checked="checked" id="id_offer_0" name="offer" value="1" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_0">Offer 1</label>

            <input id="id_offer_1" name="offer" value="2" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_1">Offer 2</label>

            <input id="id_offer_2" name="offer" value="3" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_2">Offer 3</label>

        </div>
    </div>

For last label all works fine, for first label not working none: not as in css, not .btn-group-radio .btn:nth-child(1), .btn-g... .btn:nth-of-type(1), not ... label:first-child + .btn and same.

How I understand first-child working, in my code, for input with id="id_offer_0", but I don't understand why not working nth-child and why not working nth-of-type.

Answer 1

Use these styles:

#id_offer .btn:first-of-type {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

The first button is not the first child of its parent, but it is the first of its type.

You should also select based on the ID in order to overcome Bootstrap's default borders.

.container {
    margin-top: 25px;
}
.btn-group-radio input[type=radio] {
    display: none;
}
.btn-group-radio input[type=radio]:checked + .btn {
    color: #333333;
    background-color: #e6e6e6;
    *background-color: #d9d9d9;
    background-color: #cccccc \9;
    background-color: #e6e6e6;
    background-color: #d9d9d9 \9;
    background-image: none;
    outline: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group-radio .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
#id_offer .btn:first-of-type {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

    <div class="container">
        <div class="btn-group btn-group-justified btn-group-radio" role="group" id="id_offer">

            <input checked="checked" id="id_offer_0" name="offer" value="1" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_0">Offer 1</label>

            <input id="id_offer_1" name="offer" value="2" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_1">Offer 2</label>

            <input id="id_offer_2" name="offer" value="3" type="radio">
            <label class="btn btn-lg btn-default" for="id_offer_2">Offer 3</label>

        </div>
    </div>