Selectores de Css.

Esvin 萧条
Mind Map by Esvin 萧条, updated about 2 months ago More Less
anhita
Created by anhita over 6 years ago
Esvin 萧条
Copied by Esvin 萧条 about 2 months ago
0
0

Description

Mind Map on Selectores de Css., created by Esvin 萧条 on 03/27/2020.
Tags

Resource summary

Selectores de Css.
1 Combinador de columna ||

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>
2 Combinador CSS /deep/ para iluminar las sombras

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.
3 Combinador CSS de referencia '/ref/'

Annotations:

  • A título informativo. El documento sobre los selectores de nivel 4 introduce este selector. label:matches(:hover, :focus) /for/ input {}
4 Combinador CSS de namespace '|' y qualified names

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>;;;
5 Combinador de hermano posterior adyacente '+'

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".
6 Combinadores de selectores de Css.

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.
6.1
6.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'.
6.2.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').
6.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>
7 Selector de CSS Compuesto.

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): 
8 Selector de Css, Simple.

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.
9 Selector de CSS Complejo.

Annotations:

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

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 {}
11 Selectores CSS elementales

Annotations:

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

Annotations:

  • Selector CSS de Identificador único o id '#' Selector CSS de clase '.'
13 Selector CSS por nombre y valor de atributo

Annotations:

  • [att=algo] [att] [att|=algo] [att~=algo]
14 Listas de selectores CSS

Annotations:

  • El selector CSS por pseudoclase :matches() El selector CSS por pseudoclase :not() El selector CSS por pseudoclase :has()
15 Todos los selectores CSS de pseudoelemento

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"
Show full summary Hide full summary

Similar

Conceptos básicos de redes
ARISAI DARIO BARRAGAN LOPEZ
Herramientas de Software para Comercio y Finanzas
mishelleisabel
FUNDAMENTOS DE REDES DE COMPUTADORAS
Jacqueline Rodríguez
FUNDAMENTOS DE REDES DE COMPUTADORAS
VICTOR RAFAEL ESCOBAR RODRIGUEZ
FUNDAMENTOS DE REDES DE COMPUTADORAS
VICTOR RAFAEL ESCOBAR RODRIGUEZ
FUNDAMENTOS DE REDES DE COMPUTADORAS
VICTOR RAFAEL ESCOBAR RODRIGUEZ
FUNDAMENTOS DE REDES DE COMPUTADORAS
VICTOR RAFAEL ESCOBAR RODRIGUEZ
FUNDAMENTOS DE REDES DE COMPUTADORAS
diego camacho
FUNDAMENTOS DE REDES DE COMPUTADORAS
Isabella Florez
FUNDAMENTOS DE REDES DE COMPUTADORAS
Abel Robles