Seletor de first-child em CSS: escolha o primeiro item

A pseudo-classe first-child em CSS é usado para selecionar o primeiro item no recipiente. Quando um determinado tipo de elemento não é considerado, o valor tem apenas a sua posição relativamente a um dos pais. Existem algumas sutilezas no funcionamento do seletor de que é necessário compreender para o uso correto.

CSS-pseudo-classes

Além de ids, classes, as tags e atributos de pseudo-classes são um dos tipos de CSS, seletores. Sua característica é que eles não podem ser instalados diretamente no HTML.

Exemplos de pseudo-classes são "a primeira linha de container", "a primeira letra da palavra", "o primeiro elemento filho da mãe ou do pai". O navegador pode detectar esses itens só depois ele analisou a página e atingiu o DOM de árvore e, em alguns casos, somente após o processamento.

Disponibilidade em CSS de um tal mecanismo permite determinar a aparência, que não está presa ao HTML, o código, o que abre grandes possibilidades para o projeto.

Escolha o primeiro item

A pseudo-classe first-child em CSS é responsável pela escolha do primeiro elemento no contêiner pai. Os nós de texto são ignorados, em conta de vão completo tags.

Vamos Encontrar os primeiros elementos em dois simples HTML-estruturas.

O resultado é escolhido será o primeiro item da lista e a marca que define a gordura do tipo de letra.

Mais:

A instalação do Skype no seu computador

Gostaria de falar sobre essa maravilhosa tecnologia, como o Skype. Ela abre grandes oportunidades para aqueles que são forçados a se comunicar à distância. Mas nem todos sabem como é realizada a instalação do Skype no seu computador e sua posterior c...

Checkpoint é o que é?

Checkpoint ã o com valores múltiplos de uma palavra que veio do inglês (o inglês checkpoint). Literalmente, o termo é traduzido como "ponto de controle". Hoje em dia, o termo encontrou ampla aplicação em diversas áreas da vida moderna. Cada um...

Como conectar dois computadores em rede

Configurar um ponto de acesso e o roteador, muitas vezes se torna um problema grave usuários iniciantes. De acordo com os próprios fabricantes, configurando uma rede sem fio – um negócio simples. Na verdade, é muito mais difícil, e pode ser uma...

A Sintaxe

Todas as pseudo-classes em CSS são definidos por um padrão específico. O primeiro indica o selector principal e, em seguida, procura a pseudo-classe, separado por dois-pontos.

É uma regra de acentuar o texto, o primeiro elemento de b dentro de cada recipiente.

Na imagem, obviamente, o que se destacou apenas os itens que correspondam simultaneamente seletor de marca b e seletor de псевдокласса :first-child. O estilo foi aplicado dentro de cada recipiente, neste caso, dentro de todos os itens da lista.

Além da marca, como o principal, você pode usar qualquer outro seletor de CSS, por exemplo:

Erros comuns

A pseudo-classe do primeiro elemento first-child em CSS seleciona rigorosamente a marca, está em primeiro lugar no contêiner pai. Mesmo se o elemento realista da seletor, mas não é o primeiro descendente, ele não será selecionado.

Para o exemplo anterior de uma lista de citações e tornemos a trazer autores no início.

Apesar do fato de que o seletor de um item permaneceu o mesmo, CSS estilo não se aplicou, assim como o primeiro elemento em um recipiente de agora é i.

Ainda de um erro é ignorar o tag <br>. Trata-se de um elemento HTML, como, entre outras. Se ele vai para dentro de um recipiente frente ao bloco, então o selector CSS first-child não vai funcionar.

A Contabilidade de um tipo de item

Para evitar essas situações, você pode usar a pseudo-classe first-of-type. Ele funciona como um seletor CSS first-child, mas leva em conta o tipo de item.

Agora, quando são contadas apenas os itens correspondentes seletor b.

Escolha o último item

Há também a pseudo-classe last-child, que funciona da mesma forma seletor de CSS first-child, mas começa a pontuação de itens com a extremidade do recipiente.