dschib dschib - 2 months ago 10
CSS Question

Selecting a single span in a nested div

I'm facing a problem while optimizing a WebView for mobile devices. It's about making a Search bar visible which is hidden inside a

<p>
of a nested. However, I'm finding no way to select only the span of the Search bar and its label because the other spans in this
<p>
are called practically the same. Whenever I try to do something other than hiding / showing the entire paragraph, nothing works.

It looks something like this

<div class="setaction">
<p>
<span class="nowrap>
<span class="labeltext">
<label for="stxt">Search:
</label>
</span>
<input type="text" class="text" size="12" name="stxt" id="stxt" value=""
onchange="this.form.what.value='srch'; this.form.submit();"/>
....
</span>


So this is the Search label and Search bar that I need, what follows is a (kinda unnecessary) button and a few more options that I don't need to display. They are all inside a
<span class="nowrap">
(there are multiples, one after another) and I'm at a loss about how to only target the few things inside this paragraph that I need.

I would try to select only
stxt
, however when I try to do it via
div.setaction stxt
or any variation of it, nothing happens. What am I doing wrong?

Answer

Try using attribute selector:

$("[for='stxt']")

Which will give you the label.