Why doesn't this attribute selector work?

I have four links with classes that start with button_social (like button_social_facebook, button_social_twitter, etc.). I tried targeting these with an attribute selector, but [class^="button_social"] doesn’t seem to target anything, although [class^="button"] seems to work.

Of course I could just target all of these with multiple class selectors, but I’m just wondering why above doesn’t work.

Here’s a relevant CodePen:
https://codepen.io/anon/pen/zjLOrq?editors=1100

Of course, that makes a ton of sense, thanks!