Define Selectors and their Types in CSS

Zia

2 Followers

Follow

Jun 16, 2024

-

9 sec read

589

0

0

0

Selectors

Selectors refer to HTML elements with styles that users want to apply to them. Three different types of CSS selectors are as follows:

• Type selector
• Class selector
• ID selector
• Universal selector
  
  
  

1. Type Selector

A type selector specifies the element name and the styles to apply to that element. This results in applying the specified styles to all occurrences of that element on a Web page. Here, the styles are defined only once for an HTML element and are applied to all occurrences of that element.

2. Class Selector

A class selector matches elements whose class attribute is set on an HTML page and applies styles to the content of all those elements. For example, if there are span and div elements on a Web page with their class attributes set, the style specified for the class selector will be applied to both elements. A class selector starts with a period followed by the value of the class attribute.

3. ID Selector

An ID selector matches an element whose ID attribute is set on an HTML page and applies styles to the content of that element. The ID selector specifies styles for an element whose ID attribute is set to a unique value.

An ID selector starts with the hash symbol (#) followed by the ID attribute's value and the declaration block.

4. Universal Selector

The universal selector can be applied to all elements in a document. This means that it applies the specified styles to the content of all elements. It is represented by an asterisk (*) sign. For example, the universal selector is used to define the font family for all the elements.

Generic Cascading Order

Consider a scenario where you have multiple style sheets defined for an HTML page. These style sheets might have various selectors and multiple styles defined for an HTML element. Therefore, the W3C has defined some rules for applying styles to an HTML element. These rules are as follows:

• Gather all the styles that are to be applied to an element.
• Sort the declarations by source and type of style sheet. The source specifies the origin of where the styles are rendered.

The highest priority is given to an external style sheet defined by an author. The next priority is the reader, which can be software that reads the content (screen reader software), and the last priority is the browser.

• Sort the declarations by the priority of a selector, where the ID selector has the highest priority.
• Sort the declarations according to the specified order.
  
  
  

Comments

A comment refers to descriptive text that allows a Web page designer to provide information about the CSS code. Comments make the program more readable and help the designer explain the styles specified for elements. This is helpful when other Web designers analyze CSS code.

The browser can identify comments as they are marked with special characters, which are '/*' and '* /'. When the browser encounters these symbols, the text within them is ignored and not displayed in the browser. You can have single-line and multi-line comments in the CSS file.