<div>
<div class="content wysiwyg-content">
I trying to wrap by head around selecting the correct element on the html page within CSS.<br />
<br />
In html<br />
<br />
&lt;fieldset id=&quot;commentFS&quot;&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Username <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input name=&quot;username&quot; id=&quot;username&quot; &nbsp;required=&quot;required&quot;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title=&quot;Supply your username&quot; /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Comment &lt;br /&gt; (500 character limit)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;textarea name=&quot;commentBox&quot; &nbsp;id=&quot;commentBox&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;maxlength=&quot;500&quot;&gt;&lt;/textarea<wbr />&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Submit Comment&quot; /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/p&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
&lt;/fieldset&gt;<br />
<br />
If I want to apply the same style rule to the input box and the textarea, do I create my selector as follows:<br />
label input, label textarea {};<br />
<br />
if I want to change the background color of the input boxes and the textarea, when they have focus, do I create the selector as follows ?<br />
<br />
input:focus, textarea:focus {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: rgb(225, 225, 240);<br />
}<br />
<br />
Is it necessary to prefix both with label?
</div>
</div>


I trying to wrap by head around selecting the correct element on the html page within CSS.

In html

<fieldset id="commentFS">
	<label>
		Username 
			<input name="username" id="username"  required="required"
	     		  title="Supply your username" />
	</label>
	<label>
		Comment <br /> (500 character limit)
		<textarea name="commentBox"  id="commentBox"	maxlength="500"></textarea>	
	</label>		
	<p>
		<input type="submit" value="Submit Comment" />				
	</p>					
</fieldset>

If I want to apply the same style rule to the input box and the textarea, do I create my selector as follows:
label input, label textarea {};

if I want to change the background color of the input boxes and the textarea, when they have focus, do I create the selector as follows ?

input:focus, textarea:focus {
	background-color: rgb(225, 225, 240);
}

Is it necessary to prefix both with label?

CSS Contextual Selectors

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.