Please enable JavaScript.
Coggle requires JavaScript to display documents.
Selectores - Coggle Diagram
Selectores
-
-
Selector universal
El asterisco (*) es el selector universal en CSS. De forma automática, el asterisco selecciona todos los elementos en un documento.Este selector puede utilizarse en combinación con espacios de nombres (namespace). namespace es una regla que puedes emplear en documentos con muchos espacios de nombres, como HTML5, SVG en línea, MathML o XML. Al usar espacios de nombres definidos puedes restringir la selección de elementos que se encuentren dentro de ellos.
Selector de clase
Los selectores de clase son herramientas que, como su nombre lo indica, permiten seleccionar todos los elementos que tienen un mismo nombre de clase. Por ejemplo, .intro te permitirá elegir todos los elementos que pertenecen a la clase «intro», así como .index escogerá todo elemento que tenga una clase «index».
Si utilizas el framework Bootstrap CSS seguramente has notado que todos los estilos usan clases como selectores. Puedes encontrar la lista completa de clases de Bootstrap en W3Schools.
Selector de tipo
Un selector de tipo permite seleccionar todos los elementos en HTML que tienen un nombre de nodo común. Por ejemplo, al usar «a» el selector elegirá todos los elementos <a> y les aplicará el valor de la propiedad en CSS. «Input» seleccionará todos los elementos <input>, «span» todos los elementos <span> y así sucesivamente.
Además, puedes usar espacios de nombre definidos para restringir las selecciones de los selectores de tipo a elementos que están dentro de este espacio.
Selector de ID
Un selector de ID está diseñado para seleccionar elementos con base en su atributo de ID. Por ejemplo, #toc seleccionará todos los elementos que tengas como ID «toc». Ten en cuenta que este selector solo funcionará cuando el valor dado en el selector es idéntico al del ID del atributo que quieres referir.
Selector de atributo
Los selectores de atributo están hechos para seleccionar todos los elementos que correspondan a un atributo específico o a un valor de atributo definido. Por ejemplo, a[href] elegirá todos los enlaces, mientras que a[href*="hubspot"] únicamente escogerá todas las URL que contengan la palabra «hubspot».
Puedes utilizar este tipo de selector para aplicar reglas de CSS a elementos que tienen un valor de atributo, por lo que si quieres modificar el estilo de todos los elementos que contengan «hubspot» en su URL, deberás utilizar a[href*="hubspot"].
Por otro lado, también puedes utilizar un espacio de nombre en combinación con este selector para restringir la búsqueda a elementos dentro de ese espacio.
Selector de pseudo-clase
Un selector de pseudo-clase permite aplicar CSS a una selección de elementos o a elementos que se encuentran en un estado específico. Por ejemplo, :hover hará que únicamente se modifique el estilo de un elemento cuando el usuario se desplace sobre él. Otros ejemplos comunes son :active, :visited o :invalid.