Selector CSS

En esta página:

• Introducción y atajos de teclado
• Abrir herramientas para desarrolladores
• Copiar un selector de una página
• ¿Qué son los selectores?

Hay varias áreas de la aplicación axe Auditor que proporcionan un campo Selector. Siga este proceso cuando desee especificar un selector CSS particular para probarlo como parte de lo siguiente:

• Componente común (Nuevo caso de prueba > Agregar componente): al definir un componente común en el panel Componentes comunes al crear un nuevo caso de prueba.
• Componente de área de página (Nuevo caso de prueba > Agregar página > Alcance del área de página): al definir un área de página en el panel Agregar páginas al crear un nuevo caso de prueba.
• Componente de área de página (Preparar página para automatización y manual) Pruebas > Alcance del Área de Página): Al definir un Área de Página "página en prueba" en la preparación de la página para pruebas automatizadas y manuales Pantalla de prueba a la que se accede desde Descripción general de ejecución de pruebas.

Primeros pasos

Para localizar y copiar un selector normalmente es necesario utilizar las "herramientas de desarrollo" que vienen con el navegador web. Estos tienen nombres diferentes según el tipo de navegador y cada uno ofrece atajos de teclado para acceder a las herramientas y navegar dentro de ellas.

Referencia de atajos de teclado por tipo de navegador

• Google Chrome - DevTools: Atajos de teclado - Google Chrome
• Apple Safari - Web Inspector: ¡Atajos de teclado
• Microsoft Edge - Herramientas para desarrolladores: ¡Atajos de teclado para herramientas para desarrolladores
• Microsoft Internet Explorer - Herramientas para desarrolladores F12: Atajos de teclado de Herramientas para desarrolladores ¡Referencia

En una Mac: generalmente, la tecla Cmd (⌘) se puede sustituir por [Ctrl] en un dispositivo OSX o iOS.

Abrir herramientas para desarrolladores (ejemplo de Firefox)

El ejemplo que sigue muestra el uso de las herramientas para desarrolladores de Mozilla Firefox. Para obtener más información sobre el uso de atajos de teclado con las herramientas para desarrolladores de Firefox, consulte ¡Atajos de teclado para desarrolladores de Mozilla.

Puede abrir el Inspector (una de las herramientas para desarrolladores que las inicia todas) de cualquiera de las siguientes maneras:

• Sin un elemento seleccionado: Elija la opción Inspector del menú Desarrollador (Ctrl+Shift+I)**), o desde la barra de menú de Firefox, seleccione Herramientas > Desarrollador web > Inspector (Ctrl+Shift+C).
• Con un elemento seleccionado: Haga clic derecho en un elemento de una página web y seleccione Inspeccionar elemento [(Q)]{.kbd}.

Copiar un selector de una página

1. Haga clic derecho en la región deseada de la página de prueba y luego seleccione

Inspeccionar elemento desde el menú para iniciar el Inspector y luego poder seleccionar un elemento en la página (o utilice el atajo de teclado Ctrl+Shift+I).

2. Copia el selector CSS que quieres seleccionar. Por ejemplo, al usar las herramientas para desarrolladores de Firefox, puede hacer clic derecho > Copiar selector único para el elemento actualmente seleccionado en la herramienta Inspector. Asegúrese de pegar la referencia del elemento completa con el formato correcto (por ejemplo, para probar el elemento de atributo id para el valor "main", deberá especificar #main como selector).

   

Información - Referencia de formato del selector con ejemplo: Para obtener detalles completos sobre los selectores CSS con formato adecuado y la referencia completa de elementos, consulte la documentación del selector CSS web para desarrolladores de Mozilla{.external} o la Recomendación de selectores de nivel 3 del W3C{.external}.

• Selector: #id - El selector #id aplica estilo al elemento con el id especificado.

• Ejemplo: #main - El id especificado es main.

• Ejemplo de referencia: Selecciona el elemento con id="main".

  

3. Pegue el selector que copió del portapapeles virtual en el campo Selector.

   Cuando acceda a los problemas encontrados para el componente o área de página en cuestión, verá incluidos aquellos relacionados con el selector CSS específico que ingresó.

4. Error conocido: Al usar el selector CSS en el navegador Chrome. Inspeccionar con el botón derecho, abrir Herramientas de desarrollo, en la pestaña Elementos, buscar el selector CSS para hacer clic en un elemento; copiar > xpath o elemento > copiar > xpath completo siempre devuelven este error. ' Se produjo un error desconocido. Si este caso de prueba contiene algún componente o área de página, asegúrese de que todos los selectores sean válidos. Solución alternativa: busque el ID del selector CSS y copie>Copiar selector

¿Qué son los selectores? {#descripción general}

Respuesta rápida: Son cadenas de texto que se pueden utilizar para identificar un elemento o grupo de elementos en una página web.

Respuesta un poco más larga y técnica: Los selectores son patrones que coinciden con elementos en una estructura de árbol y se pueden usar para probar fragmentos específicos o seleccionar nodos dentro de documentos HTML o XML. El lenguaje de hojas de estilo en cascada (CSS3) describe la representación de documentos HTML en pantalla o en voz, y utiliza selectores para vincular estilos. Propiedades a elementos en documentos HTML.

Uso: Al evaluar la expresión en todos los elementos de un subárbol, los selectores se pueden utilizar para:

• Seleccionar un conjunto de elementos
• Seleccionar un solo elemento de un conjunto de elementos

Estructura: Un selector representa una estructura que puede usarse como una condición (como en una regla CSS) que determina qué elementos coincide un selector con en un árbol de documento, o como una descripción plana del fragmento HTML o XML correspondiente a esa estructura.

Tipos: Los tipos de selector incluyen:

• Universal: El nombre calificado de cualquier tipo de elemento (*) Por ejemplo, para especificar el nombre calificado de cualquier elemento del idioma inglés en el árbol del documento para cualquier espacio de nombres, introduzca:

  *[hreflang|=en]

• Tipo: Un prefijo de componente de espacio de nombres opcional añadido al nombre de un elemento (|) Por ejemplo, para representar un elemento de encabezado 2 en el árbol del documento, simplemente introduzca:

  h2

• Atributo: Representa el atributo de un elemento ([]) Por ejemplo, para representar un elemento h3 que lleva el atributo title, sea cual sea su valor, ingrese:

  h3[título]

• Clase: Punto o notación "de punto" para representar el atributo de clase para el espacio de nombres respectivo (.) Por ejemplo, para asignar información de estilo de color verde a todos los elementos con clase="ejemplo", ingrese:

  .example { color: verde } / todos los elementos con clase=example */

• ID: Los atributos declarados como de tipo ID identifican de forma única un elemento con un signo numérico (#) Por ejemplo, para representar un selector de ID donde cualquier elemento cuyo valor de atributo tipificado como ID sea "12345", ingrese:

  #12345

• Pseudoclases: Selección de información fuera del árbol del documento que no se puede expresar con selectores simples (:) Por ejemplo, para especificar un selector que represente enlaces que lleven clase externa y ya visitados, ingrese:

  a.external:visitado

• Pseudoelementos: Dos dos puntos seguidos del nombre de un pseudoelemento permiten acceder a contenido más allá del árbol del documento actual, y solo se permite uno por selector (::)

  Por ejemplo, para cambiar las letras de la primera línea de cada elemento p a mayúsculas, ingrese:

  p::first-line { text-transform: uppercase }

• Combinadores: Permiten la especificación de una ruta jerárquica para mostrar la ascendencia, como elementos secundarios o hermanos ( ) o (+)

  Por ejemplo, para orientar la búsqueda a elementos em que son descendientes de elementos h1, ingrese:

  h1 em.

  Es una descripción correcta y válida, aunque parcial, del siguiente fragmento:

  <h1>Este titular <span class="myclass"> Es <em>very> importante</span></h1>

Sintaxis: La "gramática" básica de los selectores incluye lo siguiente:

• *: 0 o más (Nota: Dado que esto se puede omitir cuando está implícito, se puede dejar fuera) (No se utiliza a menudo.)
• +: 1 o más
• ?: 0 o 1
• |: separa alternativas
• [ ]: agrupación

Referencia completa: Para obtener más información, consulte Consorcio World Wide Web (W3C) - Selectores de nivel 3: https://drafts.csswg.org/selectors-3/

Temas relacionados:

• Añadir componentes comunes
• Agregar una página a un caso de prueba