Cascading Style Sheets - CSS Selectors

 CSS Selector

A selector is an HTML tag or id or class at which a style will be applied. 

Selector Types:

• HTML Element selector
• ID selector
• Class selector
• Universal selector
• Group selector

HTML Element Selector

• Tag selector or Element type Selector is the first Major selector in CSS. 
• Tag Selectors are LEVEL 1 selectors in CSS. 
• Any html element can be accessed in CSS using their tag name. 
• The CSS properties will apply to all the html tag for that selector used in web page.

ID Selector

• The id selector uses the id attribute of an HTML element to select a specific element.
• The id of an element is unique within a page, so the id selector is used to select one unique element!
• To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Class Selector

• The CSS class selector is specifies style for a group of elements. 
• The class selector is used on several elements.
• Using class you can use the same style for many HTML elements. 
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed by the class name.

Class Selector – specific element

To specify only one specific HTML element   should be affected then you should use the  element name with class selector.

Universal Selector

• The  universal  selector  is  used  as  a  wildcard  character (*).  
• It  selects  all  the  elements on the Webpages.

Example :

*   {   color : #FF3E0C;  font-family: Verdana;}

Grouping Selector

• The grouping selector selects all the HTML elements with the same style definitions.
• It is used to group the html elements for applying of same styles.
• To group selectors, separate each selector with a comma.

Attribute Selector

Attribute Selector select an html element based on their attributes name or value. Brackets [] are used to write attribute or attribute with value. 

Child Selector

A Child selector allows you to style only those elements which are direct descendants.

Example:

p>strong { color: red; }

<p>Web hosting is the service of providing <strong>storage space.</strong> The website  is made available on the Internet with the help of web hosting. </p>

Pseudo-class Selector

• A CSS pseudo-class selector allows you to select and style an element with a special state specified by a keyword.
• Pseudo Selectors are selectors used with colon selector
• Top pseudo selectors and :hover, :focus, :active, :link, :visited etc.