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 Layout Basics Page Layout with the Float Property The Float Challenge Solution

Leigh Maher
Leigh Maher
21,830 Points
Posted by Leigh Maher
Leigh Maher
21,830 Points

Using the :after pseudo class instead of clearfix class

I've noticed in some frameworks that they use a pseudo class (I think that's what it's called, but not sure) instead of the psuedo element e.g.

.container:after instead of .clearfix::after

To me it seems using the first example above makes the css more cleaner because you don't have to add the clearfix class to the element in the markup.

Which is the preferred method here?

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

I understand the thought in principal, but elements sharing classes is very common, particularly in larger websites. I think in this case either solution would work and it's about personal preference. :-)

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

Using after creates a pseudo element regardless of whether you identify it with one colon (:) or two (::). So both .container:after and .clearfix::after are psuedo elements. The two-colon notation is preferred for pseudo elements to help distinguish them from pseudo classes (like "hover"). But it makes no difference to the browser.

I think what you were really talking about is adding a pseudo element to a class that is already used for another purpose vs. creating a unique pseudo element class. In the first case, the HTML would not change, and in the latter the unique class would be added whenever the pseudo element was used. That's the part that is mostly a matter of personal preference.

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Thanks Jonathan. I use multiple classes in markup, too. Just thinking that being able to target an element without having to add an extra class could be a good thing. Cheers.