CSS Selectors to have in mind

I was the other day reading a post about CSS selectors just to remember or to learn something new and I found some new selectors you can use from IE7 and forward (the rest of the browsers have no problems with them).

Since IE6 does not recognize them you may just forget them for a pair of years until IE6 becomes more unused or try this javascript library made by Dean Edward that helps you making old IEs act as IE7, 8 or 9 as you wish.

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 is maybe the most interesting selector, it let’s you establish an 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 establishes the blue color for links that match the criteria, but you may think that the link could not be written exactly that way so it is not that good. Don’t worry, we have 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.

You can read more about this at Tutsplus, since that’s the web I found all this and has more info.