CSS Selectors Are fun
This part is pretty easy. A “.” represents a class, no dot and you’re selecting just the element. You can see it reflected in the Codepen below. Isn’t pizza delicious? You can also select with ids (“#”) but it’s generally seen as bad practice to use IDs as selectors in CSS.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”rVKdbG” default_tab=”html” user=”Fixyourcss”]See the Pen <a href=’http://codepen.io/Fixyourcss/pen/rVKdbG/’>rVKdbG</a> by Jordan Hansen (<a href=’http://codepen.io/Fixyourcss’>@Fixyourcss</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
CSS stands for “Cascading Style Sheets” which means the styles apply top to bottom (this goes for css files as well). It is, however, interesting to note that there are exceptions to this rule based on specificity. Selecting a class has more precedence than selecting just an element (otherwise the .sword would be overwritten by the div selector) because it is more specific than just the element selector. There is an “!important” command, which allows you to overwrite anything (except another !important tag that is lower in the Cascade). You generally want to avoid using this. CSS tricks has written an article about when it’s okay to use !important and it’s worth reading.
Advanced (read fun) selectors
These CSS selectors are really powerful. Take a look below. We can make active things change with “:hover” (this can also be used for :active, :focus, and :visited). We can select children by placing a space between selectors, with it going from parent to child from left to right. Want to only select an element with two specific selectors? Just put them right next to each other, like “.spanContainer.secondContainer”.
And this little nuget that I think is pretty great! At the very least it’s kind of helpful when you’re trying to figure out what styles are applying to what. A selector like “.spanContainer:hover span” will make it so that when the parent is hovered over, the child span will receive the styles you want to apply to it! Not knowing this (like I didn’t for a long time!) can make for some confusing times when you’re trying to figure out why the style isn’t being shown on the element that you are hovering over!
[codepen_embed height="268" theme_id="0" slug_hash="MwXGWo" default_tab="result" user="Fixyourcss"]See the Pen <a href='http://codepen.io/Fixyourcss/pen/MwXGWo/'>MwXGWo</a> by Jordan Hansen (<a href='http://codepen.io/Fixyourcss'>@Fixyourcss</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]
The moral of all this is that you can do a LOT with CSS selectors. They allow to easily touch any element in your page and apply the necessary styles. Get used to them and use them!
This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.