How do I target nested elements with CSS correctly? [closed]


Tags: html,css,nested

Problem :

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.



Solution :

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.


    CSS Howto..

    How to slide in divs from off screen into absolute layout using CSS transitions?

    How to make layout with 3 elements where 1 is resizable

    CSS: How to have to divs side by side with height 100%?

    How to make blur effect without white light?

    How long can a CSS selector be?

    How do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    How to do page numbering in header/footer htmls with wkhtmltopdf?

    Rails4: How to create Image Links with Hover?

    IE11 dosen't show CSS-Content properly

    How to push down absolute positioned div with CSS

    In html, how is a child element's percentage-based size calculated when its parent has padding?

    How to use a CSS attribute selector to target a specific height?

    How to use CSS import in Liferay? CSS fast load works bad

    How to distribute cell height evenly within a row spanning two cells vertically?

    How to apply styles to an element with a prefixed ID?

    How to apply picture for submit button

    How do I prevent this list from moving across the page?

    How to do taxonomy based css styling using drupal template.php?

    How do I center a character in a box using CSS?

    How to remove blue underline on text in Chrome - CSS?

    How can I read a CSS property value using Javascript?

    How to style the tabs in primary menu links in a Drupal 7 subtheme?

    How do I tell what are the ids and classes of a rail html.erb component?

    How can I put three elements in the same column, with the first on top, second and third in the center of the remaining space, using Flexbox?

    In a html table cell, how can i force images to be the bottom left and the bottom right that have different heights?

    jQuery, CSS: Two divs, how can I make them “show”next to each other?

    How does *, *:after, *:before work?

    How to customize Subscribe2 button appearance in WordPress?

    how to center text vertically in html using css only

    How do I get nested divs to be same height and expand to the largest of the heights?