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 CSS Selectors Selectors - Beyond the Basics Course Overview

Posted by khasper bas
khasper bas
312 Points

ATTRIBUTE SELECTORS

i was trying to make my labels for my checkboxes bold when been checked this is how i did it

input[type="checkbox"]:checked + label{ font-weight:bold; } instead of applying bold to the checked labels ,it rather apply labels to the next labels.. How do i go about that?

3 Answers

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

If your checkbox and label are ordered like the video, then the video code should work. If you would like specific help with your project code, make a snapshot of your workspace and post the link to it here.

Steven Parker
Steven Parker
229,657 Points
Steven Parker
Steven Parker
229,657 Points

The adjacent sibling combiner (+) always applies to the following sibling, there's no "previous sibling" combiner. So I'm guessing you want the labels to appear before the check boxes. One way to accomplish this would be to code the labels as following the inputs (so your current code will work), but cause the labels to swap order in the display using flexbox:

page.html 
<ul>
  <li><input type="checkbox"><label>test 1</label></li>
  <li><input type="checkbox"><label>test 2</label></li>
  <li><input type="checkbox"><label>test 3</label></li>
</ul>
styles.css 
input[type="checkbox"]:checked + label { font-weight: bold; }
li { display: flex; }
li label { order: -1; }  /* make labels appear BEFORE checkboxes */
khasper bas
khasper bas
312 Points
khasper bas
khasper bas
312 Points

no, i the lessons, Guil Hernandez did an example, where he made the label bold when it's corresponding checkbox is checked. i tried the same thing but it didn't work for me so i'm asking what's the right way to go about that?