The order of precedence for the various CSS selectors

The following list of selectors is by increasing specificity:

  • Universal selectors
    • * { padding:12px; border: 1px solid #be135f; }
  • Type selectors
    • textarea { background-color:#821b83; }
  • Class selectors
    • .badge { font-style:italic; }
  • Attributes selectors
    • The attribute selector is another selector that is now fairly widely supported. The attribute selector will style an element based on its attribute. Let’s look at an example. Supposing your external links are denoted by rel="external" (which typically indicates a link to an external resource) and you want them to appear dark blue, you would write the following CSS:  a[rel=external] { color:#110e7f; }
  • Pseudo-classes
  • ID selectors
  • Inline style

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s