How do I target div class within a form? - html

Question

I am trying to target what and where, as well as
search.
Here is my html:
<div class="entry-content">
<p> </p>
<div class="entry-content">
<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" data-show_pagination="false" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">What?</label><br />
<input id="search_keywords" name="search_keywords" type="text" value="" placeholder="Chef, Cleaner, Manager" />
</div>
<div class="search_location">
<label for="search_location">Where?</label><br />
<input id="search_location" name="search_location" type="text" value="" placeholder="London, Berlin, Bristol" />
<input name="filter_job_type[]" type="submit" value="search" />
</div>
</div>
<div class="showing_jobs"></div>
<div></div>
<div>
Post A Job
</div>
</form>
</div>
</div>
<p><a class="load_more_jobs" style="display: none;" href="#"><strong>Load more listings</strong></a></p>
</div>
Tried everything including.
.entry-content {color: green;}
Interestingly,
. entry-content {background-color: green;}
works, but
.entry-content {color: green! important;}
does nothing.

Answer 1

you can use the following style to target all the labels inside entry-content. This works unless the style is not overrided by other styles
.entry-content label{
color:green;
}
For specific labels, you can use,
.search_keywords label{
color:green;
}
.search_location label{
color:green;
}
UPDATE
For input fields like chef,manager etc you can use
.search_keywords input{
//Your style here
}
or since you have id for the input field, use
#search_keywords{
//Style here
}
and for the submit button search, you can use the following,
.search_location input[type=submit]{
//style here
}

Answer 2

You can target by attribute and value:
label[for="search_keywords"]{ /* what label*/
background-color: red;
}
label[for="search_location"]{ /* where label */
background-color: blue;
}
input[type="submit"]{ /* search button */
background-color: green;
}
The color attribute refers to the text color, not the background colour.

Answer 3

Try attribute selectors
[for="search_keywords"],
[for="search_location"],
[name="filter_job_type[]"] {
color: green;
}
<div class="entry-content">
<p> </p>
<div class="entry-content">
<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" data-show_pagination="false" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
<form class="job_filters">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">What?</label><br />
<input id="search_keywords" name="search_keywords" type="text" value="" placeholder="Chef, Cleaner, Manager" />
</div>
<div class="search_location">
<label for="search_location">Where?</label><br />
<input id="search_location" name="search_location" type="text" value="" placeholder="London, Berlin, Bristol" />
<input name="filter_job_type[]" type="submit" value="search" />
</div>
</div>
<div class="showing_jobs"></div>
<div></div>
<div>
Post A Job
</div>
</form>
</div>
</div>
<p><a class="load_more_jobs" style="display: none;" href="#"><strong>Load more listings</strong></a></p>
</div>