Selektor :only-of-type odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :only-of-type.
Cechy elementu HTML spełniają zasadę pseudoklasy :only-of-type, gdy w danym momencie dany element HTML jest jedynym elementem swojego typu względem ewentualnych pozostałych elementów dzieci należących do wspólnego elementu rodzica.
Informacje techniczne o selektorze :only-of-type
ograniczenie - elementy HTML
brak
ograniczenie - właściwości CSS
brak
Przykładowa reguła CSS, selektor :only-of-type
p:only-of-type{color:red;}
Wyjaśnienie przykładowej reguły CSS
p:only-of-type{color:red;}
p:only-of-type
do każdego elementu p, który jest jedynym elementem typu p względem pozostałych elementów dzieci należących do wspólnego elementu rodzica
color
dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kurs CSS</title>
<style>
p:only-of-type {
color:red;
}
</style>
</head>
<body>
<div>
<p>
tekst w tym elemencie "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch elementów typu "p"
</p>
<p>
tekst w tym elemencie "p" nie jest koloru czerwonego, ponieważ ten element "p" nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest drugim z dwóch elementów typu "p"
</p>
</div>
<hr>
<div>
<div>
tekst w tym elemencie "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest pierwszym z dwóch elementów typu "div"
</div>
<p>
tekst w tym elemencie "p" jest koloru czerwonego, ponieważ ten element "p" jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica
</p>
<div>
tekst w tym elemencie "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest jedynym elementem typu "p" względem pozostałych elementów dzieci należących do wspólnego elementu rodzica, lecz jest drugim z dwóch elementów typu "div"
</div>
</div>
</body>
</html>
