Construir su sitio web desde cero es una forma de crear un sitio web rápido y liviano del que tiene el control total. Sin embargo, crear, personalizar y mantener su sitio HTML requerirá conocimientos técnicos de HTML, CSS y JavaScript, y una importante inversión de tiempo.
La buena noticia es que hay muchas maneras de simplificar estos pasos. Para simplificar el proceso de personalización de su sitio, puede, por ejemplo, utilizar selectores de CSS.
A continuación, veremos más de cerca qué son los selectores de CSS. A continuación, veremos los diferentes tipos, cómo usarlos y las combinaciones para crear un sitio web que se vea exactamente como lo desea.
¿Qué son los selectores de CSS?
Los selectores de CSS se utilizan para definir los elementos que desea diseñar con CSS. Hay muchos tipos diferentes de selectores de CSS, cada uno con su propia sintaxis única. Le dicen al navegador a qué elementos aplicar los valores de propiedad CSS.
El elemento o elementos a los que apunta un selector de CSS se denominan «sujeto del selector». El tema se puede seleccionar en función del tipo de elemento, la clase, el nombre del identificador, el atributo proporcionado o el pseudoestado.
Con tantos tipos disponibles, no solo puede personalizar su sitio más rápido, sino también mantener un control granular sobre su código.
A continuación, explicaremos cómo usar los selectores de CSS en su sitio y luego exploraremos los diferentes tipos de selectores. Empecemos.
Cómo usar selectores en CSS
Hay dos formas principales de usar selectores en CSS. Si tiene código HTML y CSS en un documento, solo necesita agregar selectores de CSS a la sección
su página web. Verá este método en los ejemplos a continuación.Sin embargo, puede almacenar HTML y CSS en documentos separados. En este caso, puede tener un documento HTML llamado index.html y un archivo CSS llamado style.css. El archivo index.html debe contener una línea de código que haga referencia al archivo CSS para que estos estilos se representen en su sitio web.
Este archivo HTML se vería así:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selectors</title>
<link rel="stylesheet" href="https://blog.hubspot.com/website/style.css">
</head>
<body>
<h1>What are CSS selectors & How Do They Work?</h1>
<body>
</html>
Presta atención al poema. ? Esta es una referencia a su archivo CSS. Este archivo solo contendría los bloques selectores que verá a continuación y otros CSS personalizados.
Ahora que hemos repasado una breve descripción de cómo funcionan los selectores de CSS, echemos un vistazo a los principales tipos de selectores a continuación.
Tipos de selectores CSS
Discutiremos los cuatro tipos principales de selectores de CSS a continuación. Cada uno de ellos puede ayudarlo a elegir diferentes grupos de elementos en el sitio web. Comenzaremos con el tipo que lo ayude a orientar los grupos más grandes de elementos y luego pasaremos a los tipos que son más precisos.
En las siguientes demostraciones usaré Editor de código en línea W3Schools. Esto significa que puede hacer clic en cualquier enlace fuente para ver el fragmento completo de código siguiendo el ejemplo y probar el suyo propio.
Selector universal
Estrella
es un selector universal en CSS. De forma predeterminada, selecciona todos los elementos del documento.
Sin embargo, se puede utilizar junto con espacios de nombres. @namespace es una regla útil en documentos con múltiples espacios de nombres como HTML5, SVG incrustado, MathML y/o XML. Puede usar un espacio de nombres definido para restringir el selector universal a elementos solo en ese espacio de nombres.
Sintaxis del selector universal
- Un selector universal puede tener la siguiente sintaxis:
- * o * | * {propiedades de estilo} – coincide con todos los elementos
- ns | * {propiedades de estilo}: coincide con todos los elementos en el espacio de nombres ns
| * {propiedades de estilo}: coincide con todos los elementos sin un espacio de nombres definido
Un ejemplo de un selector universal
Digamos que quiero que todos los elementos de la página sean de color naranja, entonces puedo usar el selector universal.
<h1>All elements on the page, from the heading 1</h1>
<h2 class="pastoral">to the heading 2 with class=pastoral</h1>
<p>to the paragraph will be orange.</p>
Aquí está mi código HTML:
* {
color: orange;
}
Aquí está mi CSS con un selector universal que define todos los elementos.
Un selector universal que aplica CSS a todos los elementos
Fuente
Selección de tipo
El selector de tipo selecciona todos los elementos HTML que tienen el nombre de nodo especificado. Por ejemplo, «a» seleccionará todos los elementos y aplicarles valores de propiedad CSS. La entrada seleccionará todos los elementos Abarcar todos los elementos y así.
También puede usar un espacio de nombres definido para limitar el selector de tipo a elementos solo en ese espacio de nombres.
Sintaxis del selector de tipo
- La sintaxis para el selector de tipo es:
elemento {propiedades de estilo}
Ejemplo de selección de tipo
Supongamos que mi documento tiene elementos de párrafo y de intervalo, y quiero que los elementos de intervalo se resalten en naranja.
<span>One span. </span>
<p>No span. </p>
<span>Two span.</span>
<p>No span. </p>
Aquí está mi código HTML:
span {
background-color: orange;
}
Aquí está mi CSS con un selector de tipo que define elementos de intervalo:
Un selector de tipo que aplica CSS a elementos distribuidos
Fuente
Selector de clase
El selector de clase selecciona todos los elementos que tienen el nombre de clase dado. Por ejemplo, .intro elegirá cualquier elemento que tenga la clase «intro», al igual que .index elegirá cualquier elemento que tenga la clase «índice». Si está utilizando el marco CSS Bootstrap de código abierto, notará que prácticamente todos los estilos usan clases como selectores.
Puede encontrar una lista completa de las clases de Bootstrap en W3Schools.
Sintaxis del selector de clases
- La sintaxis del selector de clase es:
.classname {propiedades de estilo}
Un ejemplo de un selector de clase
Digamos que quiero cambiar todos los elementos de class = «pastoral» a orange.
<h1>Not orange</h1>
<h1 class="pastoral">Very orange</h1>
Aquí está mi código HTML:
.pastoral {
color: orange
}
Aquí está mi CSS con un selector de clase que define todos los elementos con la clase «pastoral».
Un selector de clase que aplica CSS a elementos con una clase pastoral
Fuente
selector de identificación
El selector de ID selecciona un elemento en función de su atributo de ID. Por ejemplo, #toc seleccionará un elemento que tenga el identificador «toc». Tenga en cuenta que este selector solo funciona si el valor proporcionado en el selector coincide exactamente con el atributo de ID del elemento.
Sintaxis del selector de ID
- La sintaxis para el selector de identificador es:
#idname {propiedades de estilo}
Un ejemplo de elección de un identificador
Digamos que quiero cambiar el color y la alineación de un elemento con el id «hubspot».
<h1 id = "hubspot"> #id selector</h1>
Aquí está mi código HTML:
#hubspot {
color:orange;
text-align:right;
}
Aquí está mi CSS con un selector de identificación que define un elemento con la identificación «hubspot».
Un selector de id que aplica CSS a un elemento con un id hubspot
Fuente
Nota: Si el atributo ID del elemento está en minúsculas y yo en mayúsculas «H» en el selector de CSS, el elemento no se seleccionará.
Selector de atributos[href] El selector de atributos selecciona todos los elementos que tienen el atributo dado o el atributo establecido en el valor especificado. Por ejemplo[href*=”hubspot”] coincidirá con todos los enlaces, mientras que
solo hará coincidir los enlaces con «hubspot» en sus URL.[href=”hubspot”]También puede usar el selector de atributos para aplicar reglas CSS a elementos con el valor de atributo dado (y no solo la presencia del atributo). Entonces, si quiero diseñar enlaces con «hubspot» en su URL, puedo usar un
.
También puede usar un espacio de nombres definido para limitar el selector de atributos a elementos solo en ese espacio de nombres.
Sintaxis del selector de atributos
- [attr] La sintaxis del selector de atributos incluye lo siguiente:
- [attr=value] {propiedades de estilo}
- [attr~=value] {propiedades de estilo}
- [attr|=value] {propiedades de estilo}
- [attr^=value] {propiedades de estilo}
- [attr$=value] {propiedades de estilo}
- [attr*=value] {propiedades de estilo}
{propiedades de estilo}
La sintaxis utilizada depende de si desea seleccionar elementos que tengan el atributo establecido en un valor específico.
Un ejemplo de un selector de atributo[href=”hubspot”]Supongamos que quiero que todos los enlaces de «hubspot» en sus URL sean de color naranja. entonces puedo usar
.
<ul>
<li><a href="http://blog.com">blog.com</a></li>
<li><a href="http://hubspot.com">hubspot.com</a></li>
<li><a href="http://google.com">google.com</a></li>
<li><a href="http://blog.hubspot.com">blog.hubspot.com</a></li>
</ul>
Aquí está mi código HTML:
a[href*=”hubspot”] {
color:orange;
}
Aquí está mi CSS con un selector de atributos que define todos los enlaces que contienen «hubspot».
Selector de atributos que aplica CSS a enlaces con «hubspot» en la URL
Fuente
Selector de pseudoclase
El selector de pseudoclase aplica CSS al elemento o elementos seleccionados solo si se encuentra en un estado especial. Por ejemplo: pasar el mouse solo le dará estilo a un elemento cuando el usuario pase el mouse sobre él. Otros ejemplos comunes incluyen: activo, visitado y no válido.
Sintaxis del selector de pseudoclase
- La sintaxis del pseudo-selector es:
selector: pseudo-clase {propiedades de estilo}
Un ejemplo de un selector de pseudo-clase
Digamos que quiero cambiar el color de los enlaces que el usuario ya ha visitado a verde. Quiero que los enlaces que el usuario no ha visitado sean azules. Y quiero que mis enlaces se vuelvan de un llamativo color fucsia cuando el usuario pasa el cursor sobre ellos.
<p>So you've already visited <a href="http://hubspot.com">blog.hubspot.com</a></li>. Why not check out our home site at <a href="http://blog.hubspot.com">hubspot.com</a>?</p>
Aquí está mi código HTML:
a:link {
color: #0000FF;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
Aquí está mi CSS con tres pseudoclases diferentes para enlaces que no han sido visitados, ya han sido visitados y sobre los que se está pasando el mouse.
Un selector de pseudoclase que aplica CSS a los enlaces en función de la actividad del usuario
Fuente
Ahora que entendemos los principales tipos de selectores de CSS, echemos un vistazo a cómo puede combinarlos en su sitio.
¿Cómo se agrupan múltiples selectores en CSS?
h2 {
color: green;
}
.spacious {
color: green;
}
Suponga que tiene varios elementos a los que desea aplicar el mismo CSS, por ejemplo, h2 y una clase .space, que desea que se vuelvan verdes. Puede escribir el código como dos reglas separadas como se muestra a continuación.
También puede combinar selectores en una lista de selectores. Para crear una lista de selectores, simplemente enumere varios selectores y sepárelos con comas delante de los paréntesis que contienen las propiedades de estilo. Dado que el espacio es válido antes y después del decimal, agregaré un espacio después de cada decimal para que el código sea más fácil de leer.
h2, .spacious {
color: green;
}
Entonces la sintaxis sería: elemento, elemento, elemento {propiedades de estilo}. Aquí está el ejemplo anterior:
h2,
.spacious {
color: green;
}
También puede colocar selectores en una línea separada si eso hace que el código sea más fácil de leer. En ese caso, la sintaxis se vería así:
Combinar los selectores de CSS de esta manera puede ayudarlo a reducir el tamaño de las hojas de estilo y hacer que el sitio web se cargue más rápido.
Personalización con selectores CSS
Los selectores de CSS le permiten tener un control preciso sobre el proceso de personalización y el código al crear su sitio desde cero. Si bien puede aparecer una curva de aprendizaje, debe invertir tiempo en aprender y probar diferentes tipos de selectores de CSS. Esto le permite diseñar su sitio web de acuerdo con su marca mientras mantiene un código liviano y tiempos de carga rápidos.
