The CSS selectors you should know

there are a lot of selectors, but some of them you should never forget, the CSS3 comes with some new options for selectors, but most of them are only supported on modern browsers.

(*) selector.

* {margin: 0;padding: 0;}

The star symbol will target every single element on the page, this is a risky choice because i would add some weight to the browser.

This selector could be used with a child selector also, like this:

#container * {border: 1px solid black;}

This will target every single element that is a child of the #container div.

Compatibility

  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(#Y) selector.

#container {margin: 0;padding: 0;}

Adding the hash symbol to a selector allows us to target by id. This is easily the most common usage, the best practices tell us not to use reference to id elements, this reference are not reusables.

Compatibility

  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(.Y) selector.

.container {margin: 0;padding: 0;}

This is a class selector. The difference between ids and classes is that, using classes are more recommended than ids, because this are more reusables than others.

Compatibility

  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(X Y) selector.

ul li{margin: 0;padding: 0;}

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. As an advice avoid to many levels of nested selectors.

Compatibility

  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(X ) selector.

li{margin: 0;padding: 0;}

What if you want to target all elements on a page, according to their type, rather than an id or class name? Keep it simple, and use a type selector.

Compatibility

  1. IE7+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(X + Y) selector.

ul + p{margin: 0;padding: 0;}

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.

Compatibility

  1. IE7+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(X > Y) selector.

div > ul{margin: 0;padding: 0;}

The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.

<div>

<ul>

<li> List Item

<ul>

<li> Child </li>

</ul>

</li>

<li> List Item </li>

<li> List Item </li>

<li> List Item </li>

</ul>

</div>

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

For this reason, there are performance benefits in using the child combinator. In fact, it’s recommended particularly when working with JavaScript-based CSS selector engines.

Compatibility

  1. IE7+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(X[title]) selector.

a[title]{margin: 0;padding: 0;}

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.

Compatibility

  1. IE7+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(X:checked) selector.

input[type=radio]:checked{margin: 0;padding: 0;}

This pseudo class will only target a user interface element that has been checked, like a radio button, or checkbox. It’s as simple as that.

Compatibility

  1. IE7+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

(X:hover) selector.

li:hover{margin: 0;padding: 0;}

Oh come on. You know this one. The official term for this is user action pseudo class. It sounds confusing, but it really isn’t. Want to apply specific styling when a user hovers over an element? This will get the job done!

Compatibility

  1. IE6+
  2. Firefox
  3. Chrome
  4. Safari
  5. Opera

Conclusion:

This are the more common/used selectors, but not the only ones, exist another selector that are really helpfull for us, and that we are going to use really often, but sometimes they are kind a tricky for us to use those, i will try to write something about them in other articles, and i hope this is helpfull for some.

Show your support

Clapping shows how much you appreciated Alejandro Hinestrosa’s story.