CODEWITHSUNDEEP
css
Sandy Albaytar Jr.
Sandy Albaytar Jr.

Reputation: 59

display:none not working - probably wrong element targeted

I need to set a honeypot section of a side form to display:none but for some reason my CSS adjustments would not work. The elements involved are these (as shown when inspected via Firebug):

<li id="field_9_9" class="gfield gform_validation_container field_sublabel_below field_description_below">
<label class="gfield_label" for="input_9_9">Phone</label>
<div class="ginput_container">
<input id="input_9_9" type="text" value="" name="input_9">
</div>
<div class="gfield_description">This field is for validation purposes and should be left unchanged.</div>
</li>

On the stylesheet, I inserted:

.gfield gform_validation_container field_sublabel_below field_description_below #field_9_9 {
        display:none;
}

I have a feeling I'm targeting the wrong element. Which one should it be?

Upvotes: 0

Views: 61

Answers (1)

Deadlift
Deadlift

Reputation: 126

You need to do this:

#field_9_9.gfield.gform_validation_container.field_sublabel_below.field_description_below {
    display:none;
}

You forgot to add the "." before each class name and since all the classes (and ID) are on the same element, you need to join all the classes and ID together.

But a more elegant solution would be to simply target the ID:

#field_9_9 {
    display:none;
}

Upvotes: 1

Related Questions