You get a bonus - 1 coin for daily activity. Now you have 1 coin

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: 2026-03-10
538



Was this answer useful?
Choose a quick rating so we can improve the next answer for you.
How satisfied are you?


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

Lectures and tutorial on "Cascading CSS / CSS3 Style Sheets"

Terms: Cascading CSS / CSS3 Style Sheets