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
Jiri Taowski
1,736 PointsChecked VS Focus
Hey guys! I wonder what difference is there between :focus and :checked pseudo classes? As far as I understood :focus allows to modify appearance of an element that has been activated by a user (or simply clicked on). Seems like :checked does the same however is restricted to forms only.
3 Answers
Dave McFarland
Treehouse Teacher:checked is for radio buttons and checkboxes
:focus works with links, text form elements, select menus, text areas, buttons and any element with a tabindex attribute. Try this little experiment
- Create a new web page and add a paragraph like this:
<p tabindex="1">
Then add this CSS:
p:focus { background-color: red; }
Preview the page in Chrome (not sure this works in ALL browsers) and press the tab button. The paragraph should turn red.
:active applies to any tag that is clicked (but only when it's being clicked. Add this CSS to a page and click anywhere on the page:
:active { background-color: red; }
Calvin Nix
43,828 PointsHey Artem,
I believe that the :checked pseudo class is restricted to items that are "checkable".
e.g. checkboxes or radio buttons
So you are correct in how checked is restricted :)
Jiri Taowski
1,736 PointsThanks for the clarification. I wasn't familiar with a taxindex attribute before, now it makes some sense