CSS Rules and Selectors

You might already know that CSS is used to style HTML documents. In order to write CSS, we define something called "CSS Rules".  A "rule" is a statement that tells browsers how to represent HTML on a page. 

Rules in CSS are made up of two parts, "selector" and "declaration". The declaration part can further be divided into two parts: property and value, that are separated by a colon : and end with a semicolon ;. The semicolon tells the browser to move on to the next defined property, if available. See the figure below: 

Composition of CSS rules

The declaration is the part of the rule inside the curly braces. It specifies what a style effect will be. For example, color: red.  The selector specifies which element(s) will be affected by the declaration or, in simple words, selectors are used to select the element(s) you want to style. So in the screenshot above, all HTML H2 headings, defined on a page, will be applied a font color of red.

Some Common CSS Selectors
Although there are various type of selectors that can be specified in a stylesheet, We'll see some of the more common ones in this post. If you want to see a full list of selector types, you can visit W3Schools' website.

• Class Selectors - To target and style HTML classes, we use Class Selectors in CSS stylesheets. Class Selector name always begin with a dot/period (.) sign. See figure below

Defining Class Selectors

• ID Selectors - Just as Class Selectors are used to select corresponding CSS classes, ID Selectors are used to style HTML IDs. The only difference is that ID Selector names begin with a pound/hash sign (#). See the figure below:

Defining ID Selectors

• Element/Tag/Type Selectors -  These selectors, defined in a CSS stylesheet, will select any HTML element on a page that matches the selector's name, regardless of their position in the HTML document. Put simply, the element selector allows us to restyle an element based on its tag name. See the screenshot below:

Defining Element selectors

• Descendant Selectors -These selectors are used to select elements that are sub elements or descendants of another element.

Descendant Selectors example

• Universal Selector - When this selector is used, it'll target every single element on the page. That's why this selector is not used very often. Universal selector is denoted by an asterisk * symbol.

Universal selector application

• Attribute Selectors - HTML elements can have some properties associated with them. These properties are called attributes. To target these attributes via CSS, we use attribute selectors. For example, Consider the following code:

    <img src="picture.jpg" alt="alternate text" />
      In the example above, src and alt are attributes of the HTML element img and picture.jpg and alternate text are their values respectively. To select and style these attributes/properties, we can write the following code as shown in the image below:

Usage of Attribute selectors

    The above code will target all img tags that have an attribite-value pair of src="picture.jpg". But what if you want to target all img tags that has an attribute of src?. In this case, we'll write as follows:

img[src] {border: 10px solid lightblue; }

The CSS code, written above or displayed in the image, will result in the following output. See the image below:

Output after applying the attribute selector

• Pseudo Class Selectors -They are used to add special functionality to selectors. This is a separate topic in itself so I won't discuss it in greater detail in this post, but we'll see the more common aspects of Pseudo Class Selectors. These selectors are preceded by a colon for example :hover, :visited etc. The general syntax of a Pseudo class selector is like this:
  
  
  selector:pseudo-class {property:value;}
  
  
  - Anchor/Link Pseudo Classes - These type of Pseudo class selectors can be applied to anchor elements to add some presentational functionality.  The four anchor selectors are briefly explained in the image below.
  
  

  

  Anchor Pseudo Selectors

  
  
  Be careful of using these selectors with other than <a> tag, because IE only recognize these pseudo selectors ONLY when they're used with an anchor tag. 
  For example - li:hover, ul:hover, li:active etc. won't work in some versions of Internet Explorer.
  There are ways to get around with this problem. One of them is to use Javascript to specifically let the browser know what to do on mouseOver and mouseOut events. A website named htmldog.com has provided some nice JavaScript codes to solve this issue. Its usage and detailed explanation is given on their website, so be sure to check that out as well.
  
  - Input Pseudo Classes - Another commonly used Pseudo selector, which normally applies to input elements, is the :focus selector. Using this selector, we can style or target any input box at its active or focused state. The :focus selector is supported in all major browsers but, as always, IE 6 and 7 doesn't support it (who needs their support anyway :p). Below is a screenshot that gives an example of this selector's application. 

Example of how to use :focus Pseudo selector

How :focus is rendered in different commonly used browsers

- Position/Number based Pseudo Classes - There are many selectors for these types, but we'll see only two of them because they're most commonly used in web design industry. The first one is :first-child and second is :last-child.  

1. :first-child - The basic purpose of :first-child is to select an element that is the first child of its parent. As with other Pseudo selectors, :first-child is also used in conjunction with other elements. For example, to select the first <li> element of a <ul>, we'll write the following CSS code:


li:first-child {background: #000}
 
The code above will select the first <li> tag of all uls and will give them a background of black.
   
2. :last-child - Just like :first-child, :last-child is used to select an element that is the last child of its parent. Its usage is similar to :first-child pseudo selector.

In this post, we've looked at some very frequently used and important CSS selectors with  their brief examples. If you want to gain a little bit of more knowledge about the subject, you can always Google this topic and you'll get loads of help on it. If you ask me, I found this post to be very useful about CSS Pseudo Selectors.

This is an extremely vast topic that requires some experience in order to get a hang of it. I've just skimmed through the surface of this topic, just to give you an overview about CSS Rules and Selectors so that designers entering into the field of web design could get an introduction about CSS selectors. Hope It helped you guys. Don't forget to give your valuable feedback via comments section. See ya