CSS Selectors


CSS selectors are used to "find" (or select) HTML elements based on their.Mainly used Selectors are following :

  • Element( tagname)
  • ID (#)
  • Class (.)

Element or Tag Selector


The element selector selects HTML elements based on the element name.

Example
h1{
	color:red;
}

Id Selector


  • The id selector uses the id attribute of an HTML element to select a specific element.
  • An id should be unique within a page, so the id selector is used if you want to select a single, unique element.
  • To select an element with a specific id, write a # character, followed by the id of the element.
Example
#para{
	color:red;
}

Class Selector


  • The class selector selects elements with a specific class attribute.
  • To select elements with a specific class, write a period(.) character, followed by the name of the class.
Example
.para{
	color:red;
}

Universal Selector


Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.

Example
*{
	margin:0px;
	padding:0px;
}

Descendant Selector


Suppose you want to apply a style rule to a particular element only when it lies inside a particular element.

Example
ul li{
	font-family:roboto;
	color:#8000ff;
}

Child Selector


There is one more type of selector, which is very similar to descendants but have different functionality.

Example
div > p {
   color:red;
   line-height:30px;
}

Attribute Selector


You can also apply styles to HTML elements with particular attributes.

Example
input[type = "text"] {
   border: 1px solid #00dfdf; 
}

Grouping Selector


You can apply a style to many selectors if you like. Just separate the selectors with a comma.

Example
h1,h2,h3,h4,h5,h6,b{
	color:red;
	font-family:rockwell;
}

Learn All in Tamil © Designed & Developed By Tutor Joes