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.
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.
5.2 Element[Attribute=Value] :
This will select all the elements having attribute with certain "Value".
Example:
5.3 Element[Attribute ~=Value] :
This will select all the elements having a specific word in its value.
5.4 Element[Attribute |=value] :
This will select all the elements having attribute that begin with a specific word.
5.5 :lang(value) :
This attribute selector is used only for the elements having lang attribute and starting with a specific "value".
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.4 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;}
No comments:
Post a Comment