Selektory#
Kombinator referencji /ref/#
E /ref/ F { /* deklaracje */ }Kombinator referencji # (reference combinator) służy do wskazania elementów, które są ze sobą w pewien sposób powiązane (np. w przypadku kontrolek formularzy i elementu lable).
Kombinator referencji składa się z dwóch slashy (U+002F, /), między którymi znajduje się nazwa kwalifikowana CSS, i oddziela on dwa selektory złożone (np. input /for/ lable dla atrybutowego powiązania w HTML). Białe znaki przed pierwszym slashem i za drugim slashem są opcjonalne i nie mają specjalnego znaczenia.
Element reprezentowany przez pierwszy selektor złożony (z lewej strony) jawnie odwołuje się do elementu reprezentowanego przez drugi selektor (z prawej strony). O ile język gospodarza nie określa innej składni dla wyrażenia tego związku, to relacja istnieje wtedy, gdy wartość określonego atrybutu w pierwszym elemencie jest typu IDREF lub selektorem identyfikatora odwołującym się do drugiego elementu. Dopasowanie atrybutu dla kombinatorów referencyjnych stosuje te same zasady, jak w przypadku selektorów atrybutów.
Na chwilę obecną żadna aktualna przeglądarka nie obsługuje kombinatora referencji. W zasadzie jest to opcja właściwa dla kompletnego profilu CSS, więc testy w pierwszej kolejności należałoby przeprowadzać w implementacjach korzystających z tego profilu, np. za pomocą API selektorów.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
#l1 /for/ input {border: 5px solid yellow; color: red;}
#l3 input {border: 5px solid yellow; color: red;}
</style>
<script>
window.onload = function(){
document.querySelector("#l2 /for/ input").style.cssText = "border: 5px solid yellow; color: red;";
}
</script>
</head>
<body>
<p>Element INPUT powinien uzyskać zółte obramowanie i czerwony tekst:</p>
<label id="l1" for="name1">Wariant CSS (powiązanie): </label>
<input id="name1" type="text">
<label id="l2" for="name2">Wariant JS (powiązanie): </label>
<input id="name2" type="text">
<p>Jak w poniższym przypadku:</p>
<label id="l3">Wariant CSS (zagnieżdżenie): <input type="text" name="imie"></label>
</body>
</html>