CSS selectors 101

This time I want to give glimpse of CSS(Cascading style sheets)
Before I jump in to CSS its better to know what comprises a web page. Basically any moderate web page is composed of 3 technologies.

  1. HTML – Content
  2. JavaScript – Behavior
  3. CSS – Presentation


CSS is simply a presentation technology used in web pages to give really cool look and feel to the HTML elements(content).

CSS is simply a set of rules which will be combined with a html page to govern their appearance.

CSS can be written three different ways

  1. inline styles – inlined inside tag with style attribute. example
    . This limits to specific element
  2. embedded styles – the styles are written inside a html page using tag. This limits to a specific page
  3. external styles – the styles are written in seperate file and linked to html using the tag in tag. This is the most prefered way of writting styles.

Following is a sample css rule

above style when applied on a html page give its body a yellow background with solid border

Every css rule comprises of two things

  1. Selector
  2. Declaration

in the above style, ‘body’ is the selector and the inner statements are called declarations
selector basically selects a group of html elements and declarations are the actual rules that are applied on the selected elements.

So the heart of a css are its selectors. There are various ways in which we can select HTML elements.

1. Normal selectors

This is the simplest css selector

2. Selector groupings

In this selector we specify more than one element each separated by comma to which the declared styles need to be applied.

3.a. Descendant selectors

Descendant selectors are declared similar to selector groupings but separated by space, what this mean is(from above) the declared styles apply to element ‘a’ only when ‘a’ tag appears inside(any child of child….) ‘h1’ tag

3.b. Child selector

Same as descendant selectors but ‘a’ should be the child of ‘h1’ (this is not the case with descendant selectors)

4.a. Adjacent selector

Here ‘a’ tag should be the adjacent sibling of ‘h1’ tag

4.b. General Adjacent selector

Here ‘a’ tag should be the sibling(need not be adjacent) of ‘h1’ tag

5. ID selector

This selector selects elements whose id is ‘myaddress’

6. Class selector

This selector selects elements whose class is ‘myaddress’

7. Attribute selector

Attribute selectors simply selects an element based on their attributes.

  1. Selects any element which as href as attribute
  2. Selects any element whose type attribute has a value “submit”
  3. this ~ is for selecting attribute values seperated by spaces….so actual class attribute may be declared as
    . Selects any element whose class attribute contains style “abc”
  4. | is for selecting attribute values seperated by hypen(-)….so actual hreflang attribute may be declared as

. Selects any element whose hreflang attribute contains style “en”

  • ^ is for selecting attribute values which begins with the specified value. In above example any href whose value starts with “http://”
  • $ is for selecting attribute values which ends with the specified value. In above example any href whose value ends with “pdf
  • ^ is for selecting attribute values which contains the specified values. In above example any href whose value contain “.co.in”

9. Pseudo-class selector

These selectors are applied to only to some set of html tags. They are dependent on the behavior of the element. In the above example when a ‘a’ tag is visited(clicked) then its color will be changed to red. There are some predefined pseudo classes

  • :link
  • :visited
  • :focus
  • :hover
  • :active

9. Pseudo-element selector

These selectors are applied to decorate a specified tag, In the above example a ‘p’ tag will have its first letter background in blue color. There are some predefined pseudo elements

  • :first-letter
  • :first-line
  • :before
  • :after

10. Universal selector

This selector applies to all the elements in the document

This is brief round up of CSS selectors.

References
http://www.w3schools.com/cssref/
http://www.smashingmagazine.com/

Leave a comment

Leave a Reply