CSS primero de clase
El selector CSS :first-of-type se utiliza para seleccionar el primer elemento de su tipo en un grupo de elementos. Por ejemplo, si tiene un grupo de párrafos, el selector :first-of-type seleccionará el primer párrafo del grupo.
Este selector se usa a menudo junto con otros selectores, como el selector hijo, para seleccionar elementos específicos. Por ejemplo, el siguiente código seleccionará el primer párrafo en el primer elemento div de la página:
div:first-child > p:first-of-type {
/* CSS code */
}
¿Qué es CSS Primero de Clase?
Los selectores de CSS seleccionan los elementos que desea diseñar.
El selector más básico es el selector de elementos, que se utiliza para seleccionar un elemento por su nombre de etiqueta. Por ejemplo, el selector de elementos p seleccionará todos los elementos <p> de la página.
El selector de clase se utiliza para elegir un elemento por su nombre de clase. Por ejemplo, el selector de clase .example seleccionará todos los elementos con la clase example.
El selector de id se utiliza para elegir un elemento por su id. Por ejemplo, el selector id #ejemplo seleccionará el elemento con el id="ejemplo".
Para seleccionar la primera parte con la clase ejemplo, usaría el selector de CSS ejemplo: primero.
El primer elemento con un selector de clase se usa para seleccionar el primer elemento con la clase especificada. Por ejemplo, si desea diseñar el primer elemento <p> con la clase prueba, usaría el primer elemento con un selector de clase como este.
p.test:first-child {
El primer elemento con un selector de clase es útil cuando desea diseñar el primer elemento con una clase específica de manera diferente a los otros elementos con esa clase. Esto se usa a menudo para diseñar el primer elemento de una lista de manera diferente a los otros elementos de la lista.
Código de ejemplo:
<head>
<style>
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>This text isn't selected: it's not a `p`.</h2>
<p>This text isn't selected.</p>
</div>
</body>
Implementar CSS First of Class
Puede implementar CSS de primera clase de diferentes maneras.
La forma más común es simplemente colocar el código CSS antes que cualquier otro código en su documento HTML. Esto asegurará que el código CSS se analice primero y tendrá prioridad sobre cualquier otro código.
Otra forma de implementar CSS de primera clase es usar un archivo CSS externo.
Al usar CSS, lo primero que debe hacer es seleccionar el elemento que desea diseñar. Puede utilizar el id, la clase o la etiqueta del elemento.
Una vez que haya elegido el elemento, puede usar las propiedades CSS para diseñarlo. Por ejemplo, puede usar la propiedad color para cambiar el color del elemento o la propiedad font-size para cambiar el tamaño de la fuente del elemento.
Código de ejemplo:
<html>
<head>
<style>
p:first-of-type {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
<p>The third paragraph</p>
<p>The fourth paragraph</p>
</body>
</html>
Conclusión
Hay varias formas de seleccionar el primer elemento con una clase, pero usar el selector de CSS first-child es la más común. Este selector seleccionará el primer elemento de cualquier tipo que sea hijo del elemento que está eligiendo.
Si tiene una lista de elementos y desea elegir el primer elemento con la clase elemento, debe usar el selector CSS ul> li: primer hijo. Entonces, desde este blog, puede obtener información completa sobre CSS de primera clase.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn