El selector .class se usa para seleccionar todos los elementos que pertenecen a un atributo de clase en particular. Para seleccionar los elementos con una clase en particular, use el carácter de punto (.) especificando el nombre de la clase, es decir, coincidirá con el elemento HTML en función del contenido de su atributo de clase. El nombre de la clase se usa principalmente para establecer la propiedad CSS en una clase determinada.
Sintaxis:
.class {
// CSS property
}
Ejemplo 1: Este ejemplo demuestra el Selector de clase para el elemento HTML específico.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
color: green;
}
.gfg {
background-color: yellow;
font-style: italic;
color: green;
}
</style>
</head>
<body style="text-align:center">
<h1 class="geeks">
GeeksforGeeks
</h1>
<h2>.class Selector</h2>
<div class="gfg">
<p>GeeksforGeeks: A computer science portal</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo describe el nombre de clase separado por espacios.
HTML
<!DOCTYPE html>
<html>
<head>
<title>class selector</title>
<style>
.geeks {
color: green;
}
.gfg {
background-color: yellow;
</style>
</head>
<body style="text-align:center">
<h1 class="geeks">
GeeksforGeeks
</h1>
<h2 class="gfg">.class Selector</h2>
<p class="geeks gfg">
GeeksforGeeks: A computer science portal
</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el selector .class se enumeran a continuación:
- Google Chrome 1.0
- Firefox 1.0
- Microsoft Edge 12.0
- Ópera 3.5
- Internet Explorer 3.0
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA