Home HTML Tutorial for beginners 14 What is CSS selector and How to Write CSS selector

14 What is CSS selector and How to Write CSS selector

27
0

CSS selectors can be used to select specific content of HTML that you want to style.

We can write a CSS selector in 7 different ways.

  1. Element selector : Select elements based on HTML tag
  2. ID Selector : Select elements based on ID attribute of HTML element.
  3. CLass selector : Select elements based on Class attribute of HTML element.
  4. Combinator Selector : select elements based on a specific relation between them.
  5. Pseudo-class selector : Select elements based on a specific state.
  6. Pseudo-elements selector : Select a part of an element.
  7. Attribute selector : Select elements based on an attribute or attribute value.

In this course we will discuss about Element selector, ID Selector and Class Selector only.

  1. CSS Element Selector : The CSS element selector selects HTML elements based on tag name. One HTML file may have one or more HTML elements on same tag name. It means CSS element selector can select on or more elements from HTML file. So the CSS rules will also be applied to one or more elements.
    Example : p {color:blue;}
    This will apply blue color to all the P elements.
  2. CSS ID Selector : Select elements based on ID attribute of HTML element. The ID of an element is unique with in a webpage. It means CSS ID selector will select only one element and the rule will also be applied to that specific one element only. To select an element with a specific id, write a # followed by element ID.
    Example : #title1 {color:red;}
    This will apply red color to the element whose id is title1
  3. CSS Class selector : Select elements based on class attribute of HTML element. A webpage may have one or more element with same class value. It means CSS Class selector will select one or more HTML elements and rules will also be applied to those specific one or more elements. To select elements of a specific class write a period(.) followed by the class name.
    Example : .red {color:red;}
    This will apply red color to all the elements those have class name red.

From above we conclude that ID selector can be used to apply CSS rule to only one element and Element and class selector can be used to apply CSS rule to one or more then one elements.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here