CSS Selectors

Next ❯Ways To Add CSS

Used to select elements you want to style

  • turned_in_notTypes of Selectors
    • Element Selector
    • Id Selector
    • Class Selector
    • Universal Selector
    • Group Selector

Element Selector

It selects elements based on the element name

Example:
  • turned_in_notElement Selector
    p {
  color: green;
  text-align: center;
}
    • Here, All <p< elements will be center-aligned and text in green color

Id Selector

It selects the id attribute of an HTML element to select a specific element

  • To select specific id, write a hash (#) character, followed by the id name of the element
  • Note: Id of an element should be unique within a web page
  • Remember : Id name can't start with a number
Example:
  • turned_in_notId Selector
    #id_name {
  color: green;
  text-align: center;
}
    • Here, HTML Element with id="id_name" will be center-aligned and text in green color

Class Selector

It selects elements based on the specific class attribute

  • To select specific class, write a period/dot (.) character, followed by the class name of the element
  • Remember : Class name can't start with a number
Example:
  • turned_in_notClass Selector
    .class_name {
  text-align: center;
  color: red;
}
    • Here, All HTML Elements with className="class_name" will be center-aligned and text in red color
  • label_outlineClass Selector with specific HTML Element
    p.class_name {
  text-align: center;
  color: red;
}
    • Here, only HTML <p> Element with className="class_name" will be center-aligned and text in red color
  • label_outlineClass Selector with multi class names
    .class_name1 {
  text-align: center;
  color: red;
}
.class_name2 {
  font-size: 10px;
}
    • Here, All HTML Elements with className="class_name1 class_name2" will be center-aligned and text in red color with font size 10px

Universal Selector

It selects all elements on the web page

  • Properties are defined under Universal (*) Selector
  • If any properties defined under Universal (*) Selector is not defined for any HTML Elements in CSS in web page, then that specific property will be execute for that element
Example:
  • turned_in_notUniversal Selector with no element css defined 
    * {
  font-size: 20px;
  color: blue;
}
    • Here, All the element inside web page will be of size 20px and text in blue color
  • label_outlineUniversal Selector with some element css defined
    * {
  font-size: 20px;
  color: blue;
}
p{
  color:red;
}
    • Here, All the element inside web page will be of size 20px and text in blue color but all <p> element, text will be in red color

Group Selector

Used to select all the elements with the same style properties

  • To group selectors, separate each selector with a comma (,)
Example:
  • turned_in_notGroup Selector
    p, h1, h2 {
  text-align: center;
  font-size: 30px;
  color: red;
}
    • Here, Only <p>, <h1>, <h2> Elements will be center-aligned and text in size 30px also in red color

*Important

When you use any of the meta-characters (such as ~!@#$%^&*.,/?:;|/'+"<>(){}[]) as a literal part of a name and want to access in selector then
you should use single backslash (\)

Example: 

id="ab.cd"

Selector becomes:

#ab.cd{
  /*CSS Property... */
}

Just replace meta-character with \meta-character


  • Ways To Add CSS
❮ Prev CSS Syntax
Next ❯Ways To Add CSS
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯