Conversation


Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0


advertisement

Define Selectors and their Types in CSS

selectors in css


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.

/* Type Selector */

H3
{
 font-family: "Courier New";
 font-size: 15px;
}



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.

/* Defining a class selector in CSS */

.heading
{
 font-style: italic;
}


<h2 class="heading">TEXVN is an Educational and online Learning platform.</h2>



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.

/* Defining an ID Selector in CSS */

#heading
{
 font-style: italic;
}



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.

*{
font-family: Verdana, Calibri, sans-serif;
}



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.

/* Type Selector */

OL
{

 /* Applies lowercase Roman numbering to all the items in <OL>       element. */
  list-style-type: lower-roman;
}

CSS Selectors in CSS Types of selectors in css universal selector in css class selector in css id selector in css css selector examples css selectors define selectors in css generic cascading order comments in css

advertisement