Selector CSS

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

En esta página:

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

  • Componente Común (Nuevo Caso de Prueba > Añadir Componente): Al definir un componente común en el panel de Componentes Comunes al crear un nuevo Caso de Prueba.
  • Componente de Área de Página (Nuevo Caso de Prueba > Añadir Página > Alcance de Á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 Pruebas Automatizadas y Manuales > Alcance de Área de Página): Al definir un Área de Página de la "página bajo prueba" en la pantalla Preparar Página para Pruebas Automatizadas y Manuales accesible desde el Resumen de Ejecución de Pruebas.

Primeros pasos

Localizar y copiar un selector suele implicar el uso de las "herramientas para desarrolladores" que vienen con su navegador web. Estas tienen diferentes nombres dependiendo del tipo de navegador, y cada una ofrece atajos de teclado para acceder a las herramientas y navegar dentro de ellas.

Referencia de atajos de teclado por tipo de navegador

En un Mac: Generalmente, la tecla Cmd (⌘) puede ser sustituida por [Ctrl] en un dispositivo OSX o iOS.

Abrir herramientas de desarrollo (Ejemplo de Firefox)

El ejemplo que sigue muestra el uso de las Herramientas para Desarrolladores de Mozilla Firefox. Para más información sobre el uso de atajos de teclado con las Herramientas para Desarrolladores de Firefox, vea Atajos de teclado del Desarrollador de Mozilla.

Puedes abrir el Inspector (una de las Herramientas de Desarrollo que las lanza 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 > Desarrollo web > Inspector (Ctrl+Shift+C).
  • Con un elemento seleccionado*: Haga clic derecho un elemento en una página web y seleccione Inspeccionar elemento [(Q)]{.kbd}.

Copiar un Selector de una página

  1. Right-click en la región deseada de la página de prueba, luego seleccione Inspect Element desde el menú para iniciar el Inspector para que pueda seleccionar un elemento en la página (o use el atajo de teclado Ctrl+Shift+I).
    Context menu showing Inspect Element option after right-clicking on the page under test
  2. Copie el selector CSS que desea orientar. Por ejemplo, al usar las Herramientas para Desarrolladores de Firefox, puede right-click > Copy Unique Selector para el elemento actualmente seleccionado en la herramienta Inspector. Asegúrese de pegar la referencia completa del elemento correctamente formateada (por ejemplo, para probar el id elemento de atributo para el valor 'principal', especificaría #main como el selector).
    Firefox Developer Tools context menu showing Copy Unique Selector option

    Information - Selector Formatting Reference with Example:
    Para detalles completos sobre selectores CSS correctamente formateados y referencia completa de elementos, consulte documentación de selectores CSS de Mozilla Developer Web o Recomendación W3C Nivel 3 de Selectores.

    • Selector: #id → El #id selector aplica estilos al elemento con el id especificado.
    • Example: #main → El id especificado es main.
    • Example Reference: Selecciona el elemento con id="main".
    DevTools Inspect Element showing CSS selector for an element with id=main
  3. Pegue el selector que copió del portapapeles virtual en el Selector campo.
    Al acceder a los problemas resultantes encontrados para el componente o área de la página dirigida, 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, Abrir herramientas de desarrollo, en la pestaña de elementos, encuentre el selector css para hacer clic en el objetivo y elemento>copiar>xpath o elemento>copiar>Xpath completo siempre devuelve este error,\ 'Ocurrió 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'
    Workaround: Encuentre el ID para el Selector CSS y úselo Copy > Copy Selector.

¿Qué son los Selectores?

Respuesta rápida: Son cadenas de texto que pueden ser usadas 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 se corresponden con elementos en una estructura de árbol, y pueden ser usados para probar fragmentos específicos o seleccionar nodos dentro de documentos HTML o XML. El lenguaje de la Hoja de Estilo en Cascada (CSS3) describe la representación de documentos HTML en pantalla o en discurso, y utiliza selectores para vincular propiedades de estilo a elementos en documentos HTML.

Uso: Al evaluar la expresión a través de todos los elementos en un subárbol, los selectores pueden ser utilizados para:

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

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

Tipos: Los tipos de selectores 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 de documento para cualquier espacio de nombres, ingrese:

    *[hreflang|=en]

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

    h2

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

    h3[title]

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

    .example { color: green } / todos los elementos con class=example */

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

    #12345

  • Pseudo-clases: Selección de información fuera del árbol de documento que no se puede expresar con selectores simples (:) Por ejemplo, para especificar un selector que representa enlaces con clase external y ya visitados, ingrese:

    a.external:visited

  • Pseudo-elementos: Dos puntos seguidos del nombre de un pseudo-elemento permiten el acceso a contenido más allá del árbol de 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: Permite la especificación de un camino jerárquico para mostrar ascendencia como elementos hijo o hermano ( ) o (+)

    Por ejemplo, para apuntar a elementos em que son descendientes de elementos h1, ingrese:

    h1 em.

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

    <h1>Este <span class="myclass"> título es <em>muy>/em> importante</span></h1>

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

  • **: 0 o más (Nota: Dado que esto puede omitirse cuando se implica, no se utiliza a menudo.)
  • +: 1 o más
  • ?: 0 o 1
  • |: separa alternativas
  • [ ]: agrupación

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

Temas Relacionados:

Is this page helpful?

Help us improve this page

Still need help?