Saltar navegación

Selector de Fillos

Que é o selector de fillos?

O selector de fillos é similar ao descendente pero máis restrictivo, xa que dentro dos descendentes selecciona únicamente os que sexan fillos directos. 

A sintaxe formal do selector descendente é o símbolo de maior >:

selector > selector {
  propiedade: valor;
  ...
}

Funcionamento

Trátase dun selector similar ao selector descendente, pero moi diferente no seu funcionamento. Utilízase para seleccionar un elemento que é fillo directo doutro elemento e indícase mediante o"signo de maior que" (>). Vamos a ver un exemplo:

Código a incluír no HTML Código a incluír na regra de estilo CSS 
<!doctype html>
<html>
  <head> 
  ...
  </head>
  
  <body> 
    <p><span>Texto 1</span></p>
    <p><a href="#"><span>Texto 2</span></a></p>
   ....

p > span {
  color: red;
}

Neste exemplo, o selector p > span interprétase como "calquera elemento <span> que sexa fillo directo dun elemento <p>", polo que o primeiro elemento <span> (Texto 1) cumpre a condición do selector. Non obstante, o segundo elemento <span> (Texto 2) non a cumpre porque é descendente pero non é fillo directo dun elemento <p>.

Exemplo...

See the Pen CSS - Selector de fillos by Diego Rodicio (@drodicio) on CodePen.

Exemplo da utilización do selector de fillos

Exemplo da utilización do selector de fillos. Diego Rodicio Álvarez. CC BY-SA

Pulsa no botón de abaixo para descargar este exemplo: