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 Selectors Advanced Selectors :not() – The Negation Pseudo-Class

Posted by Rick Rana
Rick Rana
10,285 Points

Why is there a colon before 'first-child' inside the pseudo class :not()?

This is not explained in the video and I'm not sure why the colon comes before 'first-child' in the brackets. Can someone explain what this means. Am I missing something?

.col:not(:first-child), 
nav a:not(:first-child) {
  margin-left: 15px;
}```

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Rick,

This would have been covered in an earlier video here: https://teamtreehouse.com/library/css-selectors/going-further-with-attribute-selectors-and-pseudoclasses/firstchild-and-lastchild

:first-child is a structural pseudo class and requires a single colon in front. All pseudo classes need to have a single colon in front.

You're going to be covering the four existing pseudo elements next and you'll find that they have a double colon syntax. This is not a requirement though. Browsers have to accept single colon syntax for these 4 pseudo elements for backwards compatibilty since they existed in css1 and css2 when the double colon syntax hadn't been introduced yet.

Any new pseudo elements going forward will be strictly double colon syntax.

Rick Rana
Rick Rana
10,285 Points

Thanks Jason. I do recall the earlier video. However I thought the colon was used to attach itself to a target element, and not necessarily needed when targeting all 'first-child' elements - being alone in its own parentheses. I guess being consistent in the syntax is important here. Cheers!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Yes, that's correct. A strict syntax is needed to avoid ambiguity.

For example, you could have a class in your html named "first-child"

If your write :not(first-child) then the browser has no way of knowing if you meant the class in your html or the first-child pseudo class.

So if you put a dot in front then it knows you mean the class and if you put a colon in front it knows you mean the pseudo class.

Rick Rana
Rick Rana
10,285 Points

Very true. Thanks for clearing that up. :)