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
Cameron Bourke
10,198 PointsCSS Pseudo Class Conundrum
I've been working on a button within a form that changes it's colour property to white when the input field is focused on. A better way to explain it would be to just show you. The code pen is at:
http://codepen.io/cambourke/pen/LCtex
The problem I'm having is at the bottom of the css rules. I've added a pseudo class to the input element, so that when it is focused it will change the color of the text within the button to white. Sounds simple, but its not panning out that way.
input[type="email"]:focus .form-subscribe button {
color: rgba(255,255,255,1.0);
}
Any help would be greatly appreciated!
2 Answers
Kevin Kenger
32,834 PointsHey Cameron,
The input and button elements are siblings, so you should use the sibling selector (+) to target the button. Like this:
input[type="email"]:focus + button {
color: rgba(255,255,255,1.0);
}
Cameron Bourke
10,198 PointsAwesome! Just tried it then and it worked a treat.
Cheers.
Cameron Bourke
10,198 PointsCameron Bourke
10,198 PointsJust out of curiosity. How would I be able to target an element if they weren't siblings? For example, say if the button wasn't a sibling in this case and I had to use the .form-subscribe class.
Thanks in advance haha.
Kevin Kenger
32,834 PointsKevin Kenger
32,834 PointsUnfortunately we're not able to use selectors for every relationship in CSS. For instance, there's no parent selector, and we can't move up the DOM tree so to speak. We can only target elements within the scope of the initial element, which in this case is the email input.
We can select descendants of an element, siblings, and direct children. As far as I know, selecting an element higher up on the DOM tree is only doable through Javascript. The jQuery library has a
.parent()selector that allows us to target the parent element and then we can call.css()to modify the style.