Selectores de Css.

Annotations:

• El combinador de columnas || (representado por dos barras verticales), nuevo en el doc Selectores de nivel 4, selecciona las celdas pertenecientes a una columna dada. En caso de que una celda ocupase 2 o más columnas diferentes se verá afectado por cualquiera de estas. col.selected || td { background: gray; color: white; font-weight: bold; } <table> <col span="2"> <col class="selected"> <tr><td>A <td>B <td>C <tr><td colspan="2">D <td>E <tr><td>F <td colspan="2">G </table>

Annotations:

• "El combinador /deep/" es de reciente[¿cuándo?] formulación. Concebido para poder apuntar a los elementos creados o incluidos en el shadow DOM.

Annotations:

• A título informativo. El documento sobre los selectores de nivel 4 introduce este selector. label:matches(:hover, :focus) /for/ input {}

Annotations:

• La barra vertical '|' se emplea para acotar el sujeto del selector al espacio de nombres (en inglés, namespace) indicado. La especificación tiene su documento (status W3c Recomendation) específico para este tema: "CSS Namespaces Module" y los "nombres CSS calificados". @namespace misitio "http://misitio.dominio.exT"; misitio|A <span>representa el nombre A en el namespace http://misitio.dominio.ext</span>;;;

Annotations:

• a + b {} Representado por el signo '+' selecciona, al igual que el anterior, cada elemento 'b' que sea hermano de un 'a' y además estén adyacentes: 'b' tiene que aparecer en el DOM inmediatamente después de cerrar 'a', no puede haber ningún otro hermano que los separe o se interponga entre ellos. En el bloque de código anterior si el combinador CSS en vez de ser el de hermano posterior ~ es el de hermano posterior adyacente h2 + p {} sólo el primer párrafo (el que sigue al h2) se vería afectado por la regla CSS. Observa que al referirme a los combinadores CSS de hermanos incluyó la expresión «hermano posterior» ya que CSS no puede (de momento) remontar el DOM. Esto es, siempre serán elementos 'contenidos en' o 'posteriores a'. Nunca al "contenedor de" o al "precedente de".

Annotations:

• es un conjunto de computadoras que piden compartir datos, aplicaciones, recursos.las computadoras de una red de area local estan separadas por distancias de hasta unos pocos kilometros y suelen  usarse en oficinas o campus.

2. Combinador CSS de descendiente: ' ' (espacio en blanco) o '>>'

   Annotations:

   • En el documento sobre los selectores de nivel 4 se introduce el nuevo combinador >> equivalente al espacio en blanco. El espacio en blanco o el doble >> separando el nombre de dos selectores CSS se utiliza para apuntar a elementos contenidos dentro de otro en el DOM del documento. a b {} o a >> b {} selecciona a todos los elementos b contenidos (dentro) de a sin importar la profundidad o los descendientes interpuestos entre 'a' y 'b'.
   1. Combinador CSS de hijo directo '>'

      Annotations:

      • a > b {} Sólo aplica a los elementos 'b' contenidos directamente en 'a' ('b' es hijo directo de 'a').
3. Combinador CSS de hermano posterior '~'

   Annotations:

   • a ~ b {} El signo '~' en el selector obliga a que 'b' sea hermano de 'a' (estén ambos contenidos directamente en el mismo elemento). No importa que en el html entre ambos haya otros elementos hermanos interpuestos. h2 ~ p {} <article> <h2>título</h2> <p>texto del primer párrafo&lt/p> <img src='... /> <p>texto de otro párrafo&lt/p> </article>

Annotations:

• El <quote>Selector compuesto</quote> es una cadena de selectores simples sin combinadores (el espacio en blanco también queda excluido porque es un combinador): 

Annotations:

• Un selector simple es aquel que está formado sólo por una única cadena textual, sin ningún combinador. Son selectores simples el selector universal *, el selector por tipo de elemento del DOM div | p | article..., el selector de ID # y de clase ., el de atributo, el de pseudoclase : y el de pseudoelemento :: (notación actual). En la notación antigua o clásica de CSS2 los pseudoelementos también se representan como las pseudoclases :. Los combinadores son signos intercalados entre selectores simples para acotar o hacer más preciso el alcance del selector. Estos combinadores son el espacio en blanco, los signos + | ~ | > entre otros.

Annotations:

• El «Selector complejo» es una secuencia o cadena de selectores separados por «combinadores».  p span {} nav > a {} main:hover > h1 ~ p {}

Annotations:

• Una «lista de selectores» la conforman dos o más selectores de cualquier tipo separados por una coma , #unico, main:hover > h1, ol > li:only-child {}

Annotations:

• Selector universal '*' Selector CSS por tipo de elemento (nombre de etiqueta o tag)

Annotations:

• Selector CSS de Identificador único o id '#' Selector CSS de clase '.'

Annotations:

• [att=algo] [att] [att|=algo] [att~=algo]

Annotations:

• El selector CSS por pseudoclase :matches() El selector CSS por pseudoclase :not() El selector CSS por pseudoclase :has()

Annotations:

• ::after "Selectors L3"::attr() "Selectors Non Element"::backdrop "Fullscreen"::before "Selectors L3"::choices "CSS UI L3"::first-letter "Selectors L3"::first-line "Selectors L3"::footnote-call "CSS GCPM"::footnote-marker "CSS GCPM"::marker "CSS Lists L3"::nth-fragment() "CSS Overflow L3"::read-only "CSS UI L3"::repeat-index "CSS UI L3"::repeat-item "CSS UI L3"::value "CSS UI L3"