Os Seletores Compostos permitem o acesso a elementos com base na hierarquia do mesmo em relaçao a outros elementos. Pode-se através desses seletores acessar um elemento filho de outro elemento que seja pai. Na documentação da Biblioteca jQuery Seletores Hierárquicos existe na sessão de seletores a área Hierarchy que apresenta uma lista com os tipos de seletores. Exemplos:
Essse seletor encontra um filho de um determinado pai.
Esse encontra descendente de um elemento.
Esse encontra um irmão de outro elemento, que sejam filhos do mesmo pai.
Aqui é necessário que sejam irmãos e em sequência. Com a mesma tag, por exemplo.
Os requisitos para esses exercícios são o conhecimento e a compreensão de como funciona a hierarquia dos elementos na árvore Dom. Árvore Genealógica. Árvore (pai, filho, irmao, adjacente)
No html:
<h2>Seletores Compostos </h2>
<div>
<ul>
<li id="Item 1">
Primeiro
<span style="color:blue;">Item </span>
<ul>
<li id="Item 1.1">Item 1.1 </li>
<li id="Item 1.2">Item 1.2 </li>
<li id="Item 1.3">Item 1.3
<ul>
<li id="Item 1.3.1"<Item 1.3.1 </li>
</ul>
</li>
</ul>
</li>
<li id="Item 2">Item 2 </li>
<li id="Item 3">Item 3 </li>
</ul>
</div>
No javaScript:
$(document).ready(function(){
$("div span").css("background-color", "red");
});
//Aqui o elemento span fica com o fundo vermelho. Palavra item abaixo.
Para encontrar uma ul filha de li
No javaScript:
$(document).ready(function(){
$("li > ul").css("color", "yellow");
});
Nesse caso o irmão do Item 1.1, ou seja o item 2.2, ficou com a cor branca. Para isso é necessário que o elemento li no html tenha um id especificado, como nesse exemplo id="Item1_1".
Veja no html Seletores Compostos, acima:
No javaScript:
$(document).ready(function(){
$("#Item1_1 + li").css("color", "#FFFFFF");
});
Para encontrar todos os irmãos que tenha a tag li e venham depois desse elemento, usa-se o til (~).
No javaScript:
$(document).ready(function(){
$("#Item1_1 ~ li").css("color", "#FFFFFF");