1

This is a three part question. I've been making websites for a while now using HTML and CSS and user to create specific tags to match my classes or id for example

<div id="test">
    <div id="blah"></div>
</div>

Doing that I would end up with css selectors of #test and #blah.

Recently I started seeing people using #test > #blah to show that #blah sits inside of #test.

I've tried to adapt to using this format but I'm having trouble trying to select some of my elements.

Question Pt1. in the code below how would I target each of the spans without having to create a style for each one with a span class of neutral

I need to keep the span ID's for part of my javascript targeting. I've tried the lines below and some other ways but can't seem to get it right.

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc #.neutral{

#wrapper > #content_wrapper > #content_middle > #content_text > #signup_required > .sr > .sc > #.neutral{

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc .neutral{

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc span.neutral{

My Code to help show my layout with most content removed from divs:

    <div id="content_wrapper">
    <div id="content_top"></div><!-- #content_top -->
    <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>

Question Pt2. What is the correct industry standard format for using CSS, is it the format that shows how elements nest inside each other, or what I consider the neater system of just target each div or element by name.

Question Pt3. Using the format that shows how the elements nest, are there detrimental effects on download speed as having extra characters and lines of code often repeated must surely add to the file size.

lil_bugga
  • 81
  • 2
  • 14

1 Answers1

4

Answer to Q1 found here:

What does the ">" (greater-than sign) CSS selector mean?

You appear to have a misunderstanding of the child combinator.

The remaining questions are regarding best practice. I recommend you use as little code as possible to achieve your desired outcome.

For example... 

#wrapper #content_wrapper #content_middle #content_text #signup_required .sr .sc span.neutral{

. . . is not necessary when . . .

.sc span.neutral{

. . . will achieve the same outcome with less code, is more readable/manageable, will result in a smaller file size, and will make easier to move elements around.

Community
  • 1
  • 1
CChoma
  • 1,076
  • 1
  • 9
  • 25
  • Thank you for both pointing out where I was going wrong with my understanding of the child combinator and for your feedback with regards to best practice. I will gladly switch back to my old methods, but remember the other method for the odd occasion it may be required :D – lil_bugga Aug 28 '14 at 17:56