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
Jordan Facibene
5,062 PointsWould this be an example of bad CSS form/practice?
I understand how the pseudo-classes are used. My question, however, is this.
Is it necessary to use these classes in your CSS as opposed to a process of giving an element an ID or something of the sort, and then selecting that ID in CSS and styling it individually?
And since I am pretty sure that the answer is that it is bad form... why? It would help me just to get a little more insight!
1 Answer
Ron McCranie
7,837 PointsThere many scenarios where using pseudo classes is a good practice:
:first-child { border-top: none; } // removes the top border from the first element
:last-child { border-bottom: none; } // removes the bottom border from the last element
li:nth-child(odd) { background: #efefef; } // makes every other <li> have a background of light gray
:input[type="text"] { border: 1px solid #ccc } // gives a border to all form input items of type 'text'
I use them when creating some default styling for a site. You might also use it in a scenario where you have access to the css but not the html, or where adding classes and ids would take you a long time.
Katsumi Suno
4,194 PointsRon McCranie , I stumbled over your answer which was very helpful, with the exception of the input example where I got confused. "input" isn't a pseudo class or did I miss something?
Ron McCranie
7,837 Points@Katsumi You are right. That last line was a typo.
Tyler Dix
14,230 PointsTyler Dix
14,230 PointsHi Jordan,
I think you're slightly misunderstanding what a pseudo-class in CSS is. A very common pseudo-class is :hover, like this:
The :hover is the pseudo-class. This means that when the mouse cursor hovers over an anchor element (link) the element then goes the way of bold.
You're right that you can assign anchor elements a class or ID, then target that class or ID in your CSS file with the same rule, however there would be no way to say to the browser "I want the anchor element to go the way of bold on mouse-hover." You must use a pseudo-class in this instance.
I hope this helps clarify what exactly a pseudo-class is.
Tyler