CSS Selectors to have in mind

Here there are a few CSS selectors to have in mind when styling as some of them can save you a lot of time. Have in mind that some of them do not have full compatibility with every existing browser though.

X > Y

div#container > ul {
  border: 1px solid black;
}

This type of selector may be really useful. It lets you establish the style of direct children of an element. Look at this code:

   <div id="container">
      <ul>
         <li> List Item
           <ul>
              <li> Child </li>
           </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>
   </div>

With the X > Y you can say you want an special style for lists in #container but not to repeat this style on inner lists. So you avoid it to be repeated on the list inside the first list. A nice trick for main ul or ol tags. Also this helps in case there is another div with its own list inside #container.

X + Y

.entry + p {
   color: red;
}

In this case we have the plus symbol. We can use it to select the first tag of the second type inside the first type tag. In other words, we could make that the first paragraph inside a blog entry has its own style, in this case, a red color. Notice that this will only work if that paragraph is the immediately tag you find after the entry class tag.

X ~ Y

.entry ~ p {
   color: red;
}

This is very similar to the last selector. In this case we are saying that all the p tags which are directly preceded by an entry class tag are showed in red. Very useful if you want to show a sum of entries like a feed or the first page.

X[title]

img[alt] {
   color: green;
}

This one let’s you establish a style for the tags that have an attribute or an specific value on that attribute. Let’s see other examples:

a[href="http://www.rubencanton.com"] {  
   color: #00f;
 }
a[href*="rubencanton"]{  
   color: #00f;
 }
a[href^="http"]{  
   # background: url(path/to/external/icon.png) no-repeat;
   # padding-left: 10px;
 }
a[href$=".jpg"]{  
   color: #0f0;
 }

The first example sets a blue color for links matching the criteria, but that link could be written slightly different so this approach doesn’t seem to be that good. Luckily there are some operators to help with this. The =* let’s you establish a string that has to be found on the attribute’s value, so now you can just write rubencanton and we have it done for sure.

But the problem could come if the string you are searching for is so small that may be confusing or conduce to errors, so we have two more operators to help this way.

The first one, ^=, indicates that the value has to start with that string, so you could for example set a unique style for external links, like in the example, and maybe show an image indicating that that’s an external link.

The second one is $= and it indicates that the value has to end as the string. So you could use it to set a different style for a different type of file, like a jpg.

:not

This one is new at CSS3, so be care with some browsers not following it (there is another like this you can use at jQuery which will allow you to get full compatibility if required). The not pseudo-selector allows you to de-select a bunch of elements, for example:

p:not(.highlight) {} // will style paragraphs without the ".highlight" class
:not(p) {}  // any element except the paragraphs.

The idea is to add a selector inside the parenthesis to get the elements you do not want to be selected, remember you can use commas inside a selector to add more than one. If you select some elements and then add a :not you can filter quite easily. So good!

:target

Allows to style an element when that element is the target of the loaded page. This is, if a page has a hashtag with an id, the element with that id will be styles using this selector. More info.