Tuesday, October 23, 2012

CSS Selectors


Selectors are important part of the style-sheet as they decide styles that are applied to different HTML elements.

1. Univarsal Selector (*)

This selector will be applied to every element of the document. It can be defined as follow:
*{
Definition
}

 

Example: 

 

       <html>
           <head>
             <style type=”text/css”>
                * {”background-color: blue; color: red; font-size:20px;}
           </style>
             <title> Example of Embedded or Inline Stylesheet</title>
         <head>
       <body >
             <div> This is sample text for our code.</div>
   </body>
</html>


If the universal selector is used with any other selector then it can be it is better to omit it.

2. Element Selector


Any element or HTML tags can be used as a selector. Element\Type selector will match the element present in the document.          
div {font-family: Arial; font-size: 20px;}

Now the above font style will be applied to all the div tags in the document.

   2.1 Grouping

Element selector can be grouped together if it is required to apply same style to all the required elements in the document.
div {font-family: Arial; font-size: 20px;}
span {font-family: Arial; font-size: 20px;}
em {font-family: Arial; font-size: 20px;}

                  Is similar to 

div, em, span {font-family: Arial; font-size: 20px;}

 

2.2 Parent Child (Parent > child) 

In this case the style is applied to the elements that are child of the parent element.
Example:
div >span{font-family: Arial; font-size: 20px;}

Now the style will be applied to the all the <span> tags in the <div>.


  2.3 Element1 + Element2

This type of selector will apply style to the elements that are immediately placed after element1.
div+span{font-family: Arial; font-size: 20px;}

In this the style will be applied to all the span tags placed after the div.


     3. Class Selectors 



           The class selector is a classic method to apply css. It is applied to the elements with attribute class.
Syntax for creating the class is as follows :

.<classname>{property:value}

Example :
.example1{font-family: Arial; font-size: 20px;}

Above is simple class created.
<div class=”example1”></div>

Above is the example of how a class can be applied to any tag. The class “example1” can be applied to any tag with class attribute.

We can apply the class attribute to specific tag by using following method.
<elementname>.<classname> {property:value}

Example:
p.example1{font-family: Arial; font-size: 20px;}

The above class will be applied to only to the <p> element in the document having class=”example1”.
If the <p> tag is implemented without the class example1 the style defined in the class is not applied.

4. ID   Selectors

The ID selector is applied to the element with a specific id applied using id attribute. The id selector can be created using “#”, following is the syntax for creating the ID selector

#idname{property:value}

Example:

Simple id with font styles is created and applied to a para tag in the following example:
#idexample{font-family: Arial; font-size: 20px;}

<p id=”idexample”>ID example</p>

      If element is specified before the “id selector” then it is applied only to that element.
<elementname>#<idname> {property:value}

Example:
P#idexample1{font-family: Arial; font-size: 20px;}

The above id will be applied to only to the <p> element in the document having id=”idexample1”.
If the <p> tag is implemented without the id “idexample1” the style defined in the class is not applied.

 5. Attribute  Selectors 


      The Attribute selectors will help to select the elements with certain attributes or their value. This is very helpful when we are trying to apply style to selected group of elements having certain attributes.
 

 5.1 Element[Attribute]
        This will select all the elements having attribute enclosed in [] bracket.

Example:

a[target]{font-family: Arial; font-size: 20px;}


5.2 Element[Attribute=Value]
        This will select all the elements having attribute with certain "Value".

Example:

 
div[id=test]{font-family: Arial; font-size: 20px;}



5.3 Element[Attribute ~=Value]
        This will select all the elements having a specific word in its value.

Example:

 
div[class~=test]{font-family: Arial; font-size: 20px;}



 5.Element[Attribute |=value]

        This will select all the elements having attribute that begin with a specific word.
 
Example:

 
div[class|=test]{font-family: Arial; font-size: 20px;}

 5.5 :lang(value) :

        This attribute selector is used only for the elements having lang attribute and starting with a specific "value".

 
Example:

 
div:lang(en){font-family: Arial; font-size: 20px;}