For a while now, I've been creating websites using HTML and CSS, carefully matching specific tags to my classes or IDs. However, I recently noticed a trend where people use selectors like #test > #blah to indicate that #blah is nested inside of #test.
While trying to adapt to this format, I encountered some difficulties in selecting certain elements.
Question Pt1. In the code snippet below, how can I target each span without manually creating a style for each one with a neutral class?
I need to maintain the span IDs for JavaScript targeting purposes. I've tried different selector formats but haven't had success yet.
My layout code with most content removed from divs:
<div id="content_wrapper">
<div id="content_top"></div>
<div id="content_middle">
<div id="content_text">
<div id="benefits"></div>
<div id="signup">
<form name="signup_required" id="signup_required" onsubmit="return false;">
<div class="sr">
<div class="sc">
<label>First Name<br />
<input id="first_name" type="text" onblur="addtick('first_name')"></label>
<span id="first_nametick" class="neutral">d</span>
</div>
<div class="sc">
<label>Surname<br />
<input id="surname" type="text" onblur="addtick('surname')"></label>
<span id="surnametick" class="neutral"></span>
</div>
<div class="sc">
<label>Gender<br />
<select id="gender" onblur="addtick('gender')">
<option value="m">Male</option>
<option value="f">Female</option>
</select></label>
<span id="gendertick" class="neutral"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Question Pt2. What is considered the industry standard format for using CSS? Is it displaying the nesting structure of elements or simply targeting each element by name?
Question Pt3. Does using a format that represents element nesting have negative effects on download speed due to additional characters and repeated lines of code increasing file size?