CODEWITHSUNDEEP
htmlcss
Jamie
Jamie

Reputation: 436

CSS Selectors conflicting

I have two sets of radio buttons that I want to style differently. One is in a table the other is in a div. The parent is in the table the children the div.

So it looks like this

<td class="lblcontainer">
    <input type"radio" name="advSearch[puborpost]" value="Published">
    <input type"radio" name="advSearch[puborpost]" value="Posted">
    <div class="calChooser">
        <input type"radio" name="cal[puborpost]" value="24 Hours">
        <input type"radio" name="cal[puborpost]" value="1 Week">
    </div>
</td>

My css looks like this

td.lblcontainer input[type="radio"]{
*css values*
}
div.calChooser input[type="radio"]{
*css values*
}

When I open my dev tools the td.lblcontainer is being applied to the div.calChooser for all my radio buttons inside my div.

What am I missing that prevents the radio buttons in div.calChooser from bubbling up and taking the styles for td.lblcontainer?

Upvotes: 1

Views: 483

Answers (3)

Paul Shryock
Paul Shryock

Reputation: 1429

.lblcontainer input {
  /* Style all inputs inside .lblcontainer, if you have any shared styles */
}

.lblcontainer > input {
  /* Style inputs that are direct children of .lblcontainer */
}

.calChooser input {
  /* Style inputs that are children of .calChooser */
}

Upvotes: 1

Jatin Maheshwari
Jatin Maheshwari

Reputation: 11

use !important attribute in div.calChooser like

.calChooser input[type="radio"]{
property : value!important;
}

Upvotes: -3

onyx
onyx

Reputation: 1618

Rules that appear later in the code override earlier rules if both have the same specificity.

I presume you got td.lblcontainer input[type="radio"] defined later in your CSS file. Either put it above, or instead do

td.lblcontainer > input[type="radio"]{
*css values*
}

div.calChooser input[type="radio"]{
*css values*
}

Note the > selector only targets first-level children, therefore won't affect the input inside your div.

Upvotes: 5

Related Questions