Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

What would be the 'correct' way of doing this?

Hey guys, I'm just wondering what would be the correct way of doing this...

So I have this HTML:

<li class="li-toggle">
            <h3 class="h3-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h3>
            <div class="panel">
             <select class="form-control select-box">
                 <option value="make-any">Make (Any)</option>
                 <option value="two">Two</option>
                 <option value="three">Three</option>
                 <option value="four">Four</option>
                 <option value="five">Five</option>
             </select>
             <select class="form-control select-box">
                 <option value="model-any">Model (Any)</option>
                 <option value="two">Two</option>
                 <option value="three">Three</option>
                 <option value="four">Four</option>
                 <option value="five">Five</option>
             </select>
            </div>
           </li>

Now as you can see I have two select elements, in my CSS I have a bottom margin that applies to both select elements.

I don't want the bottom margin to apply to the last select element, I know I could just add a class to the bottom select element however is there a better way such as adding a last-child? I tried this however it didn't work :(

4 Answers

Ryan Watson
Ryan Watson
5,471 Points
Ryan Watson
Ryan Watson
5,471 Points

I'm not entirely sure what you are asking here, but if you wish to apply a style to one select element but not the other, the best way to do this is to, as you say, apply a class or id (depending on what you are trying to accomplish) to one of the select elements. This method is common and in line with best practices. There is no need to use child selectors or anything else more complicated than a class or id. Often the simplest answer is the best answer, try not to over think it.

Good Luck!

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

i would suggest adding an id/class to the select element, it seems the best and most simplest way to do it :)

Shaker Advertising
Shaker Advertising
5,395 Points
Shaker Advertising
Shaker Advertising
5,395 Points

nicholas maddren

To avoid adding extra classes to your html you can target the first or last element using psuedo classes. Since :first-child has better support across browsers I would consider using that over :last-child if you can avoid it.

.panel .select-box{
    margin-bottom:20px;
}

/* now use the first-child psuedo class to remove the bottom margin - or whatever other styling */
.panel .select-box:first-child{
    margin-bottom:0;
}
Clara Hembree
Clara Hembree
11,401 Points
Clara Hembree
Clara Hembree
11,401 Points

Hi Nicholas,

I think I can see why your styling is applying to both select elements, they have the same name. One thing I try to remember is that id's are unique and classes are not.

id - each element can have only one id, each page can only have one element with that id class - you can use the same class on multiple events, you can use multiple classes on the same element

Hope this helps!