Clase pseudo structurale
Clasele pseudo structurale selectează un element după poziția lui în arborele documentului.
Clasa pseudo CSS :first-child
:first-child se potrivește cu un element doar atunci când acesta este primul copil al altui element.
Stilizează toate elementele <p> care sunt primul copil
Este selectat orice element <p> care este primul copil al părintelui său.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child Paragraph</title>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is the first child paragraph of the body (blue).</p>
<p>This is not the first child (not blue).</p>
<div>
<p>This is the first child paragraph of the div (blue).</p>
<p>This is not the first child (not blue).</p>
</div>
</body>
</html>
Stilizează primul element <em> din toate elementele <p>
În fiecare element <p> este selectat primul element <em>.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child em in p</title>
<style>
p em:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph with <em>first em (blue)</em> and <em>second em (not blue)</em>.</p>
<p>Another paragraph with <em>first em (blue)</em> and more text.</p>
</body>
</html>
Stilizează toate elementele <em> din toate elementele <p> care sunt primul copil
Aici, selecția cuprinde fiecare element <em> din interiorul unui element <p> care este el însuși primul copil al altui element.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em in First Child p</title>
<style>
p:first-child em {
color: blue;
}
</style>
</head>
<body>
<p>This is the <em>first child paragraph</em>. All <em>em elements</em> here are blue.</p>
<p>This is not the first child. <em>This em is not blue</em>.</p>
<div>
<p>This is the first child of the div. <em>This em is blue</em>.</p>
<p>Not the first child. <em>This em is not blue</em>.</p>
</div>
</body>
</html>
Clasa pseudo CSS :lang()
Pentru a selecta elemente după valoarea atributului lor lang, folosește clasa pseudo :lang().
Exemplu
Aici, elementele <q> cu lang="no" primesc propriile ghilimele.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The :lang() Pseudo-class</title>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
Alte clase pseudo structurale
Familia claselor pseudo structurale merge mai departe. Dintre copiii unui părinte, :last-child îl alege pe ultimul, :nth-child(n) pe al n-lea, :nth-last-child(n) pe al n-lea numărat de la sfârșit, iar :only-child alege un element fără frați. După tip, :first-of-type alege primul element de tipul său, iar :last-of-type pe ultimul.