El punto (.) y hash (#) ambos se utilizan como selector de CSS. Ambos selectores se utilizan para seleccionar el contenido para establecer el estilo. Los selectores de CSS seleccionan elementos HTML según su id, clase, tipo, atributo, etc.
Selector de id («#»): El selector de id selecciona el atributo id de un elemento HTML para seleccionar un elemento específico. Una identificación siempre es única dentro de la página, por lo que se elige para seleccionar un elemento único y único. Se escribe con el carácter hash (#), seguido del id del elemento.
- Sintaxis:
#element_id_name{
// CSS properties
}
- Ejemplo: en este código usaremos solo el selector de identificación para establecer el estilo de los elementos HTML.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector id(#)</title>
<style>
#container {
width: 400px;
height: 150px;
border: 2px solid black;
text-align: center;
}
#geeks {
color: green;
}
#gfg {
font-family: Courier New;
}
</style>
</head>
<body>
<div id="container">
<h1 id="geeks">GeeksforGeeks</h1>
<h4 id="gfg">A Computer Science portal for Geeks</h4>
<b class="selector">CSS Selector id(#)</b>
</div>
</body>
</html>
- Producción:
Selector de clase («.»): El selector de clase selecciona elementos HTML con un atributo de clase específico. Se utiliza con un carácter de punto “.” (símbolo de punto) seguido del nombre de la clase.
- Sintaxis:
.element_class_name{
// CSS properties
}
- Ejemplo: en este código usaremos solo el selector de clase para establecer el estilo de los elementos HTML.
html
<!DOCTYPE html>
<html>
<head>
<title>CSS class Selector</title>
<style>
.container {
width: 400px;
height: 150px;
border: 2px solid black;
text-align: center;
}
.geeks {
color: green;
}
.selector {
font-family: Courier New;
}
</style>
</head>
<body>
<div class="container">
<h1 class="geeks">GeeksforGeeks</h1>
<h4 id="gfg">A Computer Science portal for Geeks</h4>
<b class="selector">CSS Selector class(.)</b>
</div>
</body>
</html>
- Producción:
Diferencia entre los selectores de clase («.») e id («#»):
| “.” | “#” |
|---|---|
| El selector de clase “.” se utiliza para representar class=»class_name» en el elemento HTML. | El selector de identificación «#» se usa para representar id = «id_name» en el elemento HTML. |
| Cada elemento puede contener más de un “.” selector significa que los elementos contienen más de una clase que está separada por un espacio, se seleccionará con múltiples puntos como .class1 .class2 …. y así. | Cada elemento puede contener solo un selector «#», no más de uno, a diferencia de los selectores de clase. |
| Los «.» los selectores no son únicos, los mismos selectores pueden aplicarse en varios elementos, si los elementos HTML tienen la misma propiedad de clase, como una lista de elementos que pueden contener la misma clase. | Los “#” son únicos. |
Ejemplo: El ejemplo del selector Combine, en este ejemplo usaremos ambos selectores “.” y “#” .
html
<!DOCTYPE html>
<html>
<head>
<style>
/* #id selector */
#geeks {
color:green;
}
/* .class selector */
.gfg {
background-color: yellow;
font-style:italic;
color:green;
}
/* .class selector */
.options {
background-color: yellow;
color:purple;
}
</style>
</head>
<body style = "text-align:center">
<h1 id = "geeks">
GeeksforGeeks
</h1>
<h4>#id And .class Selector</h4>
<div class = "gfg">
<p>A computer science portal for Geeks</p>
</div>
<div class="select">
<select name="slct" id="slct">
<option>Computer Science Subjects</option>
<option class="options">Operating System</option>
<option class="options">Computer Networks</option>
<option class="options">Data Structure</option>
<option class="options">Algorithm</option>
<option class="options">C programming</option>
<option class="options">JAVA</option>
</select>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari