Question

I want to modify class of an element for specific parent. Here is what I have:

<form id="form2">
    <div class="blueform">
        <div class="formlegend">
        ...
        </div>
    </div>
</form>

I would like to override class formlegend only for form with id “form2”. I have tried:

#form2.formlegend {
    padding: 10px;
}

but it does not work. Is this even possible?

Answer 1

You are missing the “descendant combinator” (whitespace, usually just a single space character) between the 2 selectors:

#form2 .formlegend {
    padding: 10px;
}

Without the descendant combinator, your selector will match an element with an ID of form2 and a class of formlegend. According to the markup in your question, you need it to match an element with the class formlegend that is a descendant of an element with an ID of form2.