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

Posted by ivanwebster
ivanwebster
7,048 Points

Direct sibling selector issue

So, there is no way to select a previous sibling, but i am curious if there is a way to work around that.

I have a label for input field with the for attribute, and what I would like to do is to change the color of the label when the field gets focus. Is there a way to do it with out adding a regular class?

<body>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name">
    <label for="phone">Phone:</label>
    <input type="tel" id="phone">
    <label for="email">Email</label>
    <input type="email" id="email" disabled>
    <div>
      <input name="radio" id="radio1" type="radio">
      <label for="radio1">Option 1</label>
      <input name="radio" id="radio2" type="radio">
      <label for="radio2">Option 2</label>
    </div>
    <input type="submit" value="Submit" disabled>
  </form>
</body>

And the Styles

html {
  background-color: lightblue;
}

body {
  width: 320px;
  height: 320px;
  margin: auto;
  margin-top: 40px;
  background-color: white;
  padding: 80px;
  border: 2px solid gray;
  border-radius: 50%;
  box-shadow: 1px 1px 2px #000;
}
form {
  width: 250px;
  margin: auto;
}
input[type='text'], 
[type="tel"],
[type="email"] {
  display: block;
  margin-bottom: 20px;
  width: 100%;
  height: 30px;
  font-size: 1.7em;
  color: gray;
  border: 2px solid gray;
  border-radius: 5px;
  background-color: #eee;
}

input[type="text"]:focus, 
[type="tel"]:focus, 
[type="email"]:focus {
  border: 2px solid lightblue;
  background-color: #cec;
}

input[type="submit"] {
  margin-top: 20px;
  width: 100%;
  border: none;
  background: lightblue;
  padding: 10px 0;
  font-size: 1.5em;
  color: #eee;
  border: 2px solid white;
  border-radius: 5px;
}
input[type="submit"]:hover {
  color: gray;
  border: 2px solid gray;

}
input[type="email"]:disabled {
  background-color: #999;
  border: 2px solid #999;
}

input[type="radio"]:checked + label {
  color: black;

  border-bottom: 2px dashed lightblue;
}

label:nth-of-type(3) {
  color: #999;
}

Ze KodPen: http://codepen.io/iiivan/pen/PqydKV?editors=110

James MacDonald
James MacDonald
Courses Plus Student 6,268 Points
James MacDonald
James MacDonald
Courses Plus Student 6,268 Points

Hi Ivan,

I can't see any way to do it in this case without JavaScript. Any other geniuses here care to (hopefully) refute?

-Jamie

2 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Ivan,

If you want to use just CSS to achieve this, you could reposition your labels in your HTML to be physically AFTER their associated inputs, which would allow you to use the adjacent sibling selector ( + ) to affect them based on the state of said input(s). Then, of course, you can just use some CSS positioning magic to make the labels appear to come before their inputs on the front end.

Let me know if this helps/makes sense!

Erik

ivanwebster
ivanwebster
7,048 Points
ivanwebster
ivanwebster
7,048 Points

Thanks Eric, it makes all the sense!

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Great! Glad I could help!

Happy coding :)

Erik