The Subtly Significant Difference of CSS Pseudo Selector

Did you know there is a slight difference in CSS pseudo selector syntax?

I didn’t. And I’ve been writing CSS for the better part of 10 years. Turns out, I’ve been mis-using pseudo selectors for years. Does that matter? Well, let’s find out.

Pseudo Class vs Pseudo Element

Recently, while inspecting stylesheets for various third party code sources I noticed sometimes a single colon : would be used for pseudo selectors and sometimes double colons ::. I thought (mistakenly) the double colon syntax was an outdated way to write styles. So, finally I scratched my head and searched for a reference.

Turns out I was wrong. The double colon syntax is the new syntax starting with CSS3. But, only for Pseudo Elements.

So, what’s the difference between a Pseudo Class and Pseudo Element?

CSS Pseudo Classes

Pseudo classes represent the state of an element.

Just like normal classes, pseudo classes can be stringed together. So you could string together many like button:last-child:hover:disabled. There’s no limit to how many pseudo classes can be applied to an element except your imagination!

Common Pseudo Classes

:active :hover :focus :not() :nth-child() :checked :disabled

CSS Pseudo Elements

Pseudo elements represent a specific part of an element and are represented using a double colon.

Common Pseudo Elements

::after ::before ::selection ::first-letter ::first-line ::placeholder

Wrap Up

The reason it took so long for me to figure out the difference is because the single colon syntax for Pseudo Elements is still valid today (except for pseudo elements added in CSS3 and beyond). And since technically the syntax was valid my web tools and compilers never threw an error.

But now I know, and you do too!


TL;DR

  • Pseudo classes only use one colon. Ex: :hover, :focus, :active
  • Pseudo elements are written with two colons. Ex: ::before, ::after

📘 Reference

Line Height for All

Line height is one of the small things that can make or break your design. A little detail that is often overlooked or not properly massaged to perfection. This is going to be a short-and-sweet post outlining the best method for declaring line-heights, and there is a group discussion question at the end!
Continue reading Line Height for All

Writing Useful Github Issues

Finding out there is something wrong with the work you did on a project is bad enough, but when reading through issues is like deciphering Latin, well it’s no wonder so many developers go postal. Writing detailed, thorough, and transparent issues should be the goal of everyone on your team, because we most often write issue request for someone other than ourselves. So let’s follow the Golden Rule of issue request, “Write issue request for others as you would like them written for you (or better).”

Writing good issue request, and teaching a team the same, will save everyone time, money, and confusion in the long run. It’s really a no-brainer. I’m talking specifically about Github, because I use it most of the time for code management and I know many other developers do as well, but what I cover can be applied to any issue management tool.

Continue reading Writing Useful Github Issues

An IE8 Media Query Fallback Solution

With Responsive Web Design building a site Mobile First is an excellent way to build site infrastructure, serving the least amount of code to devices that often have less bandwidth and building up from there.

A problem is that IE8 and below do not support media-queries, thus when users visit a Mobile First site using IE8 they are served only a mobile site on a desktop browser. Whomp whomp! Personally I’m all for dropping support of IE8 and not worrying about it (which is usually what I do) but sometimes you must support IE8 whether you want to or not. Microsoft will no longer support IE8 as of April 2014, and while that’s great to hear it does not mean IE8 users will be upgrading.

Continue reading An IE8 Media Query Fallback Solution

You May Be Using @font-face Incorrectly

When I discovered that I had been using the @font-face rule incorrectly (for quite a long time actually) I was floored. How could this have happened? I was working off of numerous tutorials and suggestions online and they were all saying the same thing. Just goes to show that the internet is not always right.

Anyway, there are two basic methods for using the @font-face rule, they both work but the first (that I was using and most people on the internet are also using) is like showing up to a volleyball game with a cast on your leg and the sun in your eye.

Continue reading You May Be Using @font-face Incorrectly

Hello World or How My Career Started with a TI83 Calculator

The Hello World text is synonymous, for developers, with the start of a new project, and often a new technology. The simple phrase has a long history as a starting block for software development and testing.

A Personal Journey

My first experience with coding and development was in the fourth grade. Every month my school would hand out a short packet from Scholastic with books and other items for sale (a brilliant way for Scholastic and the school to make some money off kids, right!). In one catalogue I discovered a computer “game” which would teach kids the programming language BASIC while building video games.

Continue reading Hello World or How My Career Started with a TI83 Calculator