Universal CSS Selector

Lecture



Sometimes it is required to set simultaneously one style for all elements of a web page, for example, to set a font or a text style. In this case, the universal selector that matches any element of the web page will help.

An asterisk (*) symbol is used to denote a universal selector, and in general, the syntax is as follows.

* {Description of style rules}

In some cases, it is not necessary to specify a universal selector. For example, the entries * .class and .class are identical in their results.

Example 14.1 shows one of the possible applications of the universal selector - the choice of font and text size for all elements of the document.

Example 14.1. Using the universal selector

HTML5CSS 2.1IECrOpSaFx 

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Универсальный селектор</title> <style> * { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */ font-size: 96%; /* Размер текста */ } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html>


Note that a similar result can be obtained if in this example you change the selector * to BODY.

Questions to check

1. What style will set the red color of the text in the paragraph?

  1. * HTML P {color: red; }
  2. HTML * P {color: red; }
  3. P * {color: red; }
  4. BODY * P {color: red; }
  5. BODY P * {color: red; }

2. What does the next entry in the styles mean?

* DIV * {background: green; }

  1. Set the background color for all webpage elements.
  2. Set the color for all text elements of the document.
  3. Set the background color for all elements inside the <DIV> container.
  4. Set the background color only for <DIV> tags embedded in other containers.
  5. Green background color for all <DIV> tags in the code.

3. To which word does the div * em * selector style apply in the following code snippet? 

 <div> <h1><em>Lorem</em> ipsum</h1> <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit.</p> <ul> <li><em>Ut</em> wisis enim ad</li> <li>Quis <em><span>nostrud</span></em> exerci</li> <li>Tution ullamcorper suscipit</li> </ul> <em>Nisl</em> ut aliquip exea commodo consequat. </div>
  1. Lorem
  2. consectetuer
  3. Ut
  4. nostrud
  5. Nisl

Answers

1. HTML * P {color: red; }

2. Set the background color for all elements inside the <DIV> container.

3. nostrud

created: 2014-10-19
updated: 2021-03-13
132645

Rating 9 of 10. count vote: 2
Are you satisfied?:

Comments

To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Cascading CSS / CSS3 Style Sheets

Terms: Cascading CSS / CSS3 Style Sheets