The 30 CSS Selectors you Must Memorize

Part 1

1. *

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I'd advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary.

* {
    border: 1px dotted black;
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li> List Item 3</li>
      <li> List Item 4</li>
   </ul>   
</div>

2. #X

Prefixing the hash symbol to a selector allows us to target by id. This is easily the most common usage, however be cautious when using id selectors.

#container {
    background: #e3e3e3;
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li> List Item 3</li>
      <li> List Item 4</li>
   </ul>   
</div>

3. .X

This is a class selector. The difference between ids and classes is that, with the latter, you can target multiple elements. Use classes when you want your styling to apply to a group of elements. Alternatively, use ids to find a needle-in-a-haystack, and style only that specific element.

.error {
      color: red;
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li class="error">Something went Wrong </li>
      <li> List Item 4</li>
   </ul>   
</div>

4. X Y

The next most comment selector is the descendant selector. When you need to be more specific with your selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target the anchors which are within an unordered list? This is specifically when you'd use a descendant selector.

li a {
      color: red;
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li><a>Something went Wrong</a> </li>
      <li> List Item 4</li>
   </ul>   
</div>

5. X

What if you want to target all elements on a page, according to their type, rather than an id or classname? Keep it simple, and use a type selector. If you need to target all unordered lists, use ul {}.

div{ border: 1px solid; }
ul { padding-left: 20px; }

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li><a>Something went Wrong</a> </li>
      <li> List Item 4</li>
   </ul>   
</div>

6. X:visited and X:link

We use the :link pseudo-class to target all anchors tags which have yet to be clicked on.

Alternatively, we also have the :visited pseudo class, which, as you'd expected, allows us to apply specific styling to only the anchor tags on the page which havebeen clicked on, or visited.

a:link { color: red; }
a:visted { color: purple; }

<div id="container">Lorem ipsum dolor
 sit amet, consectetur <a href="#">
adipisicing</a> elit, sed do eiusmod 
<a href="http://net.tutsplus.com">
tempor</a> incididunt ut labore et dolore
 magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat.  
</div>

7. X + Y

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

ul + p {
   color: red;
}

<div id="container">
      <p> My paragraph here. </p>
      <ul>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
      </ul>
      <p> Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod tempor. </p>
      <p> Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod tempor. </p>
 </div>

8. X > Y

The difference between the standard X Y and X > Y is that the latter will only select direct children.

A selector of #container > ul will only target the uls which are direct children of thediv with an id of container. It will not target, for instance, the ul that is a child of the first li.

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

<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>
    <p> Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod tempor. </p>
</div>

9. X ~ Y

This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediatelypreceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.

ul ~ p {
   color: red;
}

<div id="container">
    <p> My paragraph here. </p>
    <ul>
         <li> List Item
             <ul>
                <li> Child </li>
             </ul>
         </li>
         <li> List Item </li>
    </ul>
    <p> Lorem ipsum dolor sit amet. </p>
    <p> Lorem ipsum dolor sit amet. </p>
    <div>
  	<p> Lorem ipsum dolor sit amet. </p>
    </div>
    <p> Lorem ipsum dolor sit amet. </p>
</div>

10. X[title]

Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling. But, what if you need to be more specific? Well....

a[title] {
   color: green;
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li><a title="wrong">Something went Wrong</a> </li>
      <li> List Item 4</li>
   </ul>   
</div>

11. X[href="foo"]

Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling. But, what if you need to be more specific? Well....

a[href="http://www.ecartstudio.com"] {
  color: #ff0000; /* ecartstudio red */
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li>
            <a  href="http://www.ecartstudio.com">Ecart</a>
     </li>
      <li> List Item 4</li>
   </ul>   
</div>

12. X[href*="ecart"]

There we go; that's what we need. The star designates that the proceeding value must appear somewhere in the attribute's value. That way, this covers ecartstudio.com, newweb.ecartstudio.com, cc-ci.ecarteis.com  

a[href*="ecart"] {
  color: #ff00ff; /* ecartstudio pink*/
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>
   <ul>
      <li>
            <a  href="http://www.ecartstudio.com">Ecart</a>
     </li>
      <li> List Item 4</li>
   </ul>   
</div>

13. X[href^="ecart"]

This is a cinch with the carat symbol. It's most commonly used in regular expressions to designate the beginning of a string. If we want to target all anchor tags that have a href which begins with http, we could use a selector similar to the snippet shown above. 

a[href^="ecart"] {
  color: #ff8800; /* ecart html orange*/
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li>  
            <a  href="ecartstudio.html">Ecart HTML</a>
      </li>
   </ul>
   <ul>
      <li>
            <a  href="http://www.ecartstudio.com">Ecart</a>
     </li>
      <li> List Item 4</li>
   </ul>   
</div>

14. X[href$=".html"]

Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we're searching for all anchors which link to an image -- or at least a url that ends with .html

a[href$=".html"] {
  color: #00bbff; /* ecartstudio bluesky*/
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li>  
            <a  href="ecartstudio.html">Ecart HTML</a>
      </li>
   </ul>
   <ul>
      <li>
            <a  href="http://www.ecartstudio.com">Ecart</a>
     </li>
      <li> List Item 4</li>
   </ul>   
</div>

15. X[data-*="foo"]

Refer back to number eight; how do we compensate for all of the various image types: png, jpeg, jpg, gif ? Well, we could create multiple selectors, such as:

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

But, that's a pain in the butt, and is inefficient. Another possible solution is to use custom attributes. What if we added our own data-filetype attribute to each anchor that links to an image?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

Then, with that hook in place, we can use a standard attributes selector to target only those anchors

a[data-type="image"] {
   color: red;
}

<div id="container">
   <p> My paragraph here. </p>
   <ul>
      <li> 
            <a href="lims.jpg" data-type="image">Ecart LIMS</a>
      </li>
      <li>  
            <a href="ecartstudio.png" data-type="image">Ecart HTML</a>
      </li>
   </ul>
   <ul>
      <li>
            <a href="www.ecartstudio.com" data-type="link">Ecart</a>
      </li>
      <li>
            <a href="zoclose.gif" data-type="image">Ecart Zoclose</a> 
      </li>
   </ul>   
</div>

To be continue