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 de Selector . Siga este proceso cuando quiera especificar un selector CSS particular que se probará como parte de lo siguiente:

  • Componente Común (Nuevo Caso de Prueba > Agregar 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 > 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 Pruebas Automatizadas y Manuales > Alcance del Área de Página): Al definir un Área de Página de la „página bajo prueba“ en la pantalla de Preparar Página para Pruebas Automatizadas y Manuales a la que se accede desde la Visión General de la Ejecución de Pruebas.

Primeros Pasos

Ubicar y copiar un selector generalmente implica usar 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 (⌘) 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 en 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 lanza todas ellas) de cualquiera de las siguientes maneras:

  • Sin un elemento seleccionado: Elija la **Inspector** opción del **Desarrollador** menú **(Ctrl+Shift+I)**, o desde la barra de menús de Firefox, selecciona **Herramientas > Desarrollador Web > Inspector (Ctrl+Shift+C)**.
  • Con un elemento seleccionado*: **Hacer clic derecho** en un elemento de una página web y seleccionar **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 selecciona Inspect Element desde el menú para lanzar el Inspector, de modo que puedas luego seleccionar un elemento en la página (o usar el atajo de teclado Ctrl+Shift+I).
    Context menu showing Inspect Element option after right-clicking on the page under test
  2. Copia el selector CSS que deseas apuntar. Por ejemplo, al usar las Herramientas para Desarrolladores de Firefox, puedes right-click > Copy Unique Selector para el elemento actualmente seleccionado en la herramienta Inspector. Asegúrate de pegar la referencia completa del elemento con el formato adecuado (por ejemplo, para probar el id elemento atributo para el valor 'main', deberías especificar #main como el selector).
    Firefox Developer Tools context menu showing Copy Unique Selector option

    Information - Selector Formatting Reference with Example:
    Para obtener detalles completos sobre los selectores CSS con formato adecuado y la referencia completa del elemento, consulta la documentación de Mozilla Developer Web CSS Selector o Selectors Level 3 W3C Recommendation.

    • Selector: #id → El #id selector estiliza el 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. Pega el selector que copiaste del portapapeles virtual en el campo Selector .
    Cuando accedas a los problemas resultantes encontrados para el componente o área de la página objetivo, verás incluidos aquellos relacionados con el selector CSS específico que ingresaste.
  4. Error conocido: Al utilizar el selector CSS en el navegador Chrome. Haz clic derecho para inspeccionar, abre las herramientas de desarrollo, en la pestaña de elementos, encuentra el selector css para hacer clic y copia 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 áreas de página, asegúrate de que todos los selectores sean válidos'
    Workaround: Encuentra el ID para el selector CSS y usa Copy > Copy Selector.

¿Qué son los Selectores?

**Respuesta Rápida**: Son cadenas de texto que se pueden usar 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 la Hoja de Estilos en Cascada (CSS3) describe la representación de documentos HTML en pantalla o en voz, y utiliza selectores para vincular propiedades de estilo a elementos en documentos HTML.

**Uso**: Al evaluar la expresión en todos los elementos de un subárbol, los selectores se pueden usar 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 en un árbol de documentos, o como una descripción plana del fragmento HTML o XML correspondiente 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 en inglés en el árbol del documento para cualquier espacio de nombres, ingrese:

    *[hreflang|=en]

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

    h2

  • Atributo: Representa el atributo de un elemento ([]) Por ejemplo, para representar un elemento h3 que lleve el atributo title, cualquiera 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 de tipo ID identifican de manera única un elemento con un signo de número (#) 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 del documento que no puede expresarse con selectores simples (:) Por ejemplo, para especificar un selector que represente enlaces que lleven la clase external y que ya hayan sido visitados, ingrese:

    a.external:visited

  • Pseudo-elementos: Dos puntos seguidos del nombre de un pseudo-elemento permiten acceder a contenido más allá del árbol actual del documento; 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 ascendencia como elementos hijo o hermano ( ) o (+)

    Por ejemplo, para apuntar a los 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"> titular es <em>muy>/em> importante</span></h1>

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

  • *: 0 o más (Nota: Como esto puede omitirse cuando se da por implícito, no se usa a menudo.)
  • +: 1 o más
  • ?: 0 o 1
  • |: separa alternativas
  • [ ]: agrupación

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

Temas Relacionados:

Is this page helpful?

Help us improve this page

Still need help?