Cómo seleccionar un elemento HTML en CSS

Para mejorar la aparición de páginas web escritas en HTML o XML, los programadores web utilizan reglas CSS para embellecer sus páginas web. La sintaxis CSS proporciona una amplia gama de selectores Para seleccionar elementos HTML. Seleccionar elementos HTML utilizando selectores CSS permitirá que el programador mejore sus sitios web. En este tutorial, vamos a aprender un montón de selectores CSS con los que podemos seleccionar elementos HTML.

Selectores CSS

Un selector es una regla básica de CSS. Estos selectores informan al navegador que seleccione elementos HTML particulares y los estille de la manera especificada.

Sintaxis:

H2
Text-Align: Center;
Color: Aqua;

pag
tamaño de fuente: 12px;
color azul;

Como ya se mencionó, hay varios selectores proporcionados por CSS que son.

1. Selectores básicos
2. Selector de atributos
3. Selectores de combinadores
4. Tipo selector
5. Selectores de pseudo-clase
6. Selectores de pseudo-elementos

Aprendamos sobre ellos en detalle.

Selectores básicos

Esta categoría de selectores consiste en algunos selectores CSS primarios.

Selector de elementos

Se utiliza un selector de elementos para seleccionar elementos HTML sobre la base. Por ejemplo,

H2
Text-Align: Center;
color azul;

En el ejemplo anterior, el selector de elementos selecciona

elemento y establece su color en azul y alinea el texto al centro de la página/contenedor.

Selector de identificación

Dado que cada elemento puede tener una ID única, este selector se dirige a esa ID a seleccionar el elemento y asignar valores a sus propiedades. Para seleccionar un elemento HTML usando su ID, usamos un símbolo hash (#) seguido de ID.

En el siguiente ejemplo, el selector de ID selecciona un elemento con ID = "Head1" y ajusta su alineación hacia la izquierda, mientras que el color a Aqua.

#Head1
text-align: izquierda;
Color: Aqua;

Selector de clases

Estilos de selección de clase Un elemento HTML sobre la base de un atributo de clase específico. Para seleccionar un elemento HTML usando su nombre de clase, usamos un punto seguido de un nombre de clase.

.principal
text-align: izquierda;
margen-top: 3px;
Botón de margen: 3px;

Selector universal

Para seleccionar todos los elementos de una página HTML, utilizamos un selector universal. Está representado por un signo de asterisco (*).

*
color beige;
text-align: justificar;

Selector de agrupación

Con el fin de seleccionar todos los elementos que desea seleccionar de manera similar, use el selector de agrupación.

H1, H2, P
de color negro;
Text-Align: Center;
Font-Family: 'Times New Roman', Times, serif;

Selector de atributos

Un selector de atributos utiliza nombres de atributos específicos para seleccionar elementos HTML.

Un objetivo]
color verde;
Text-Align: Center;

En el ejemplo anterior, el selector IIS seleccionando todos los elementos de los que tienen un objetivo de atributo. El selector de atributos se divide aún más en diferentes categorías. La siguiente tabla los explica.

Selectores de atributos	Descripción	Ejemplo
[attribute = "valor"]	Selecciona elementos que tienen un atributo y valor en particular.	div [lang = fr] background-color = rojo;
[atributo ~ = "valor"]	Selecciona elementos que tienen una palabra particular en su valor de atributo.	img [title ~ = “flor”] borde: 2px azul sólido
[atributo | = "valor"]	Selecciona un elemento con un atributo particular cuyo valor puede ser precisamente el valor particular o el valor particular que viene después de un guión (-).	P [lang | = en] Font-size: 12px;
[atribut^= "valor"]	Selecciona elementos con atributos con valores que comienzan con un valor particular.	A [class^= "top"] fondo de fondo: rosa;
[atributo $ = "valor"]	Selecciona elementos con atributos que tienen un valor final específico.	img [src $ = perro.jpg] border: 2px; amarillo sólido
[atributo*= "valor"]	Selecciona un elemento con valor de atributo que tiene un valor particular.	A [href*= "ejemplo"] ​​color: azul;

Selectores de combinadores

Para combinar uno o más tipos de selectores CSS básicos, utilizamos un selector de combinadores. Hay cuatro tipos de selectores de combinadores que son;

Selectores de combinadores	Descripción	Ejemplo
Descendiente	Selecciona elementos que son descendientes de un elemento específico.	div P color azul;
Niño	Selecciona aquellos elementos que son los primeros hijos de cierto elemento.	div> p color azul;
Hermano adyacente	Selecciona un elemento que viene inmediatamente después de otro elemento en particular.	Div + P color azul;
Hermano general	Selecciona todos los elementos que son los próximos hermanos de un elemento particular.	div ~ p color azul;

Escriba selectores

Los selectores de tipo se utilizan en CSS cuando desea seleccionar todos los elementos de un tipo particular en un documento. Por ejemplo.

durar
color de fondo: azul;

Selectores de pseudo-clase

Se usan selectores de pseudo-clase cuando desea describir un estado particular de un elemento. Diferentes pseudo-clases son.

Pseudo-clases	Descripción	Ejemplo
:enlace	Estiliza un enlace que aún no se ha visitado.	a: enlace color: aqua;
:visitado	Estiliza un enlace que ya ha sido visitado.	A: Visitado color: verde;
:flotar	Estiliza un elemento cuando el mouse se cierne sobre él.	A: Hover Color: Pink
: Acitve	Estiliza un enlace activo.	a: activo color: azul;
:enfocar	Se usa para diseñar elementos con foco.	P: Focus Background-Color: Purple;
:primer hijo	Se usa para diseñar al primer hijo de un elemento específico.	P: First-Child Color: Blue;
:último niño	Coincide con todos esos elementos que es el último hijo de su padre.	P: Last-Child Font-Size: 6px;
: lang	Especifica el lenguaje de un elemento en particular.	P: Lang (Eng) Citas: "-" "-";

Selectores de pseudo-elementos

Para peinar algunas partes específicas de un elemento se usan pseudo-elementos. Los pseudo-elementos son los siguientes;

Pseudo-elementos	Descripción	Ejemplo
::primera linea	Se usa para diseñar la primera línea de un texto.	P :: Primera línea Font-Size: 6px: Color: Red;
::primera letra	Se usa para diseñar la primera letra de un texto.	p :: primera letra font-weight: 7px; color azul;
::antes	Agrega contenido antes de un elemento.	p :: antes img = “flor.jpg ";
::después	Agrega contenido después de un elemento.	p :: después img = “flor.jpg ";
::marcador	Se usa para estilo marcadores de una lista.	:: marcador color: rojo; Font-Weight: 2px;
::selección	Se usa para diseñar parte seleccionada de un elemento.	:: Selección Color de fondo: azul; tamaño de fuente: 2px;

Conclusión

Para seleccionar un elemento HTML en CSS, CSS proporciona selectores para informar al navegador que seleccione elementos HTML particulares y los diseñe de la manera especificada. CSS proporciona numerosos selectores. Aquí hemos dado una lista de algunos: selectores básicos, selector de atributos, selector de tipos, selectores de combinadores, selectores de pseudo-clase, selectores de pseudoelementos. En este tutorial, exploramos varias categorías de selectores CSS y cómo usarlos.