CSS Selector Cheat Sheet

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

CSS Selectors and how they work

Single Selectors

The most basic way to use CSS and selectors is to affect all of one type of tag or class, to do this you simply use that tag or class name as the one and only selector followed by your curly braces and inside those braces set one to many properties to affect the way that that selector will render your tag or class. You must be very careful and remember that even though this is basic stuff it is very powerful, if I use a paragraph selector by itself and apply a white color this will affect all of my paragraphs and maybe some of my paragraphs are on white backgrounds. So as you can see, a single selector would probably only be utilized in creating a base style. Let’s look at an example of a single selector.

p { 
  color: #ffffff;
}

Descendent Selectors

When writing a descendent selector, we start with a parent tag or class and follow it with a space and then another tag or class name. YOu can see here that now if I only wanted to give certain paragraphs a white color that are inside of a div with a class of .darkSection I can easily do that and it won’t affect every paragraph on my page, it will only affect the paragraphs that are inside of a div that has a darker color. Lets look at what this code would look like, I’m going to show you the code for the .darkSection and the descendent selector.

.darkSection { 
  background-color: #333333;
}
.darkSection p { 
  color: #ffffff;
}

Pseudo-Selectors

If we wanted to select a tag only when a particular condition has occurred we then get into a situation where we can get even more specific and a good reason for using pseudo-selectors is to give certain properties to a links hover state. Let’s assume that we don’t like the fact that a bare anchor link gets an underline beneath it and we want to create a style that removes that style from plain links. But, when we roll over that link we want to then see the underline and change the color of the link (usually to something lighter or darker) to give the user the indication that they are interacting with that link. These subtle changes in style are very important for user interaction usability of a web page. Let’s see what the css for the anchor link and the hover state would look like using a pseudo-selector.

a { 
  text-decoration: none;
  color: #222222;
}
a:hover { 
  text-decoration: underline;
  color: #444444;
}

Let’s keep going with pseudo-selectors for a moment, because they can be very powerful. What if we had an ordered list of steps for solving a problem on our html page and we wanted the page to highlight only the first item in the list when the page was rendered, but we also needed to eventually be able to highlight just the second item on the list and so on as we move through the list over time and through interaction with the page. Well we might first make sure that we could individually highlight each of these list items one at a time just to make sure we understood the concept. And we also realize that if we can highlight one item at a time we could potentially highlight multiple items at a time or possibly highlight all items but one. Now let’s not get ahead of ourselves. Let’s see what the code would look like to highlight the first item, the third item and the last item with three different colors. We know that if we can potentially do this, than we can definitely get to our goal of highlighting on list item at a time. Here is what that test code we could write would look like

HTML CODE
<h3>Steps to Get Dressed</h3>
<ol>
  <li>Put on underwear</li>
  <li>Put on socks</li>
  <li>Put on shirt</li>
  <li>Put on pants</li>
  <li>Put on shoes</li>
</ol>
CSS CODE
ol li:first-child { 
  background-color: #FFEE99;
  color: #222222;
}
ol li:nth-child(3) { 
  background-color: #FFEE99;
  color: #222222;
}
ol li:last-child { 
  background-color: #FFEE99;
  color: #222222;
}

Let’s take this concept one step further and introduce the nth of nth child which so far we really have not seen. The whole reaon this pseudo-selector is called nth-child is because we can setup an expression. so if we wanted to select every other item like we have already we could create an expression to do so. Now I am only going to select every other item, but as you play with this concept try to do things like selecting every 3 items or maybe every 5 items. SO to get the same desired result we can refactor our code to the following css that uses an expression inside nth-child’s parenthesis.

CSS CODE
ol li:nth-child(2n+1) { 
  background-color: #FFEE99;
  color: #222222;
}

What this says is, “select every 2nd item and start with the first item”. Let’s see one more way of doing this before wrapping up on this simple concept of selecting every other item. nth-child also accepts keywords instead of expressions. You can ask for every odd or even item, in our case we would want every odd numbered item, think of the first item as being number 1. And by asking for odd we should get 1,3,5,etc.

CSS CODE
ol li:nth-child(odd) { 
  background-color: #FFEE99;
  color: #222222;
}

Basic Reset

Since each browser has slightly different user-agent stylesheets that come prepopulated with standard styles that will be forced upon our pages if we don’t reset them. It’s wise to always start out by selecting the major tags that are affected by these user-agent stylesheets and resetting their property values to zero. Now there is a lot of ideas about how you should do this, if you should use a reset or if you should use a type of normalizer like normalizr.css. If we are building our starting from scratch and designing our own pages and styles I like the idea of using a reset and then building my own foundation by way of a base style. This way I know that the only thing affecting my page is what I have written. Lets see some code for a basic css reset/foundation. Be aware that this is not just a reset, it’s combined with styles to help me build a foundation from with which to start my projects. You should take something like this and make it work for you not simply copy and paste. My personal choice of a reset/foundation style is highly influenced by Jayden Seric’s Foundation and is only slightly different. Visit his page for a line by line description of what everything this foundation style does.

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    font: 16px/1 sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ol,
ul {
    margin: 0;
    padding: 0;
}
main,
li {
    display: block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
}
strong {
    font-weight: bold;
}
a,
button {
    color: inherit;
    transition: .5s;
}
a {
    text-decoration: none;
}
button {
    overflow: visible;
    border: 0;
    font: inherit;
    -webkit-font-smoothing: inherit;
    letter-spacing: inherit;
    background: none;
    cursor: pointer;
}
::-moz-focus-inner {
    padding: 0;
    border: 0;
}
:focus {
    outline: 0;
}
img {
    max-width: 100%;
    height: auto;
    border: 0;
}

Leave a Reply

You must be logged in to post a comment.