Selector CSS

Link to Selector CSS copied to clipboard

En esta página:

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 pruebas automáticas y manuales) Pruebas >Ámbito de área de página): Al definir un área de página de la "Página en prueba" en la página de preparación para pruebas automatizadas y manuales Pantalla de prueba a la que se accede desde Descripción general de ejecución de pruebas.

Comenzando

Para localizar y copiar un selector normalmente es necesario utilizar las "herramientas de desarrollo" que vienen con el navegador web. Estas 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

Reference![](../../../images/new-window.png)](https://msdn.microsoft.com/en-us/library/dd565630.aspx)

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

Cómo abrir las 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, consulta Atajos de teclado para desarrolladores de Mozilla new window .

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, seleccioneHerramientas > 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 desde una página

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

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

![Clic derecho en la página bajo prueba y luego seleccione Inspeccionar el elemento en el menú](../../../images/right-click-inspect-element.png)

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

    Haga clic derecho en la página bajo prueba y luego seleccione Copiar selector único en el menú contextual de las herramientas para desarrolladores de Firefox

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

-Selector: - El selector #id da estilo al elemento con el id especificado. **** #id -Ejemplo: - El id especificado es. **** #main main -Referencia de ejemplo: Selecciona el elemento con. **** id="main"

![Usando devtools Inspect Element para identificar el selector CSS en la página de prueba](../../../images/main-selector-example.png)

  1. 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ó.

  2. Error conocido: Al usar el selector CSS en el navegador Chrome. Inspeccionar elemento, abrir herramientas de desarrollo, en la pestaña Elementos, buscar el selector CSS para apuntar, hacer clic y copiar>xpath del elemento o copiar>xpath completo del elemento siempre devuelve 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?

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 más 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 coinciden con 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 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 que se antepone a un nombre de 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[title]

  • Clase: Punto final 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: green } / all elements with class=example */

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

    #12345

  • Pseudo-clases: 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:

<code>a.external:visited</code>

  • 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 especificar una ruta jerárquica para mostrar la ascendencia, como elementos hijo 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>This <span class="myclass"> headline is <em>very>/em> important</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, (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 el Consorcio World Wide Web (W3C) - Selectores de nivel 3: https://drafts.csswg.org/selectors-3/ new window

Temas relacionados:

Is this page helpful?

Help us improve this page

Still need help?