Selectorul CSS universal
Selectorul universal (*) selectează toate elementele HTML de pe pagină.
Exemplu
Această regulă afectează fiecare element de pe pagină.
Prompt
O pagină web care folosește selectorul CSS universal (*) într-un bloc
<style>.
Folosește * pentru a face ca fiecare element de pe pagină să fie centrat cu text albastru. Include un titlu și câteva paragrafe.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Universal Selector</title>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on this page is affected by the universal selector.</p>
<p>So is this one.</p>
</body>
</html>
Selectorul CSS de grupare
Selectorul de grupare selectează toate elementele HTML care au același stil.
Când mai mulți selectori au aceleași declarații, gruparea lor face codul mai scurt.
Pentru a grupa selectori, separă fiecare printr-o virgulă.
Exemplu
Aici h1, h2 și p sunt grupate într-o singură regulă.
Prompt
O pagină web care folosește un selector CSS grupat într-un bloc
<style>.
Grupează h1, h2 și p într-o singură regulă (h1, h2, p) care le face centrate cu text roșu. Include câte un exemplar din fiecare element, astfel încât stilul comun să fie vizibil.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grouping Selector</title>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading</h2>
<p>This is a paragraph. All three elements share the same style.</p>
</body>
</html>
Înainte de grupare
Același stil scris separat pentru h1, h2 și p. Gruparea lor elimină această repetare.
styles.css
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Toți selectorii CSS simpli
Un rezumat rapid al selectorilor simpli:
#id— de exemplu#firstnameselectează elementul cuid="firstname"..class— de exemplu.introselectează toate elementele cu clasaintro.*— selectează toate elementele.element— de exemplupselectează toate elementele<p>.element,element,..— de exempludiv, pselectează toate elementele<div>și toate elementele<p>.