CSS Selectores : Aquí, vamos a aprender acerca de los selectores en CSS con su sintaxis y ejemplos.
CSS Selectores
En CSS los selectores identifican elementos HTML específicos como dianas class estilos CSS. Estos selectores se utilizan para conectar los elementos HTML a su CSS para que se vean más elegante.
Sintaxis:
Selector-type
{
//css code
}
Básicamente, los selectores se clasifican en los siguientes tipos,
- selector universal
- Selector de etiquetas
- Agrupación selector de
- for selector de
- selector de ID
- niño selector de
1) selector universal
Los selectores universales selecciona todos los elementos y estilos ellos. El prefijo utilizado es «*» . Todos los elementos definidos en el archivo HTML llamando serán seleccionados y estilos se aplican a ellos.
Ejemplo:
<head>
<style>
* {
background-color: red;
}
</style>
</head>
<html>
<body>
<div>
<p>Some content</p>
</div>
</body>
</html>
salida
Aquí, «*» toma todos los elementos y establecer su color de fondo a rojo.
2) Selector Tag
Los selecciona selector de etiquetas los elementos con etiquetas específicas ( & lt; div & gt; o & lt; p & gt; etc) para conectarlo a la estilo CSS Class.
Sintaxis:
tag-name{
//css styling
}
Ejemplo:
<!DOCTYPE html>
<head>
<style>
p {
Background-color: green;
}
</style>
</head>
<html>
<body>
<div>
<p>Some content</p>
</div>
</body>
</html>
salida
Aquí, toma todos los elementos del párrafo ( & lt; p & gt; ) etiqueta y establecer sus color de fondo de color verde.
3) Agrupación Selector
La propiedad agrupación selecciona selector de todos los elementos HTML con las mismas definiciones de estilo. Varias etiquetas están separados por «» .
Sintaxis:
tag-name1,tag-name2{
//css styling
}
Ejemplo:
<!DOCTYPE html>
<head>
<style>
p,
h1 {
Background-color: green;
}
</style>
</head>
<html>
<body>
<div>
<h1>heading</h1>
<p>Some content</p>
</div>
</body>
</html>
salida
Aquí, toma todos los elementos del párrafo ( & lt; p & gt; ) y encabezado1 ( & lt; h1 & gt; ) tag y fijan su color de fondo a verde.
4) class Selector
El selecciona los elementos con específica class y estilo ellos selector class. El prefijo utilizado es «»
Sintaxis:
.class-name
{
//css styling
}
Ejemplo:
<!DOCTYPE html>
<head>
<style>
.head1 {
font-size: 25px;
background-color: #efefef;
color: #f40;
}
</style>
</head>
<html>
<body>
<h1 class="head1">heading</h1>
</body>
</html>
salida
Aquí, seleccionar y estilo todos los elementos con for «head1» .
5) Id Selector
Los selecciona selector de ID de los elementos con el ID y los estilo específico. En este caso, el prefijo utilizado es «#» .
#id{
//css styling
}
Ejemplo:
<!DOCTYPE html>
<head>
<style>
#team1 {
font-size: 25px;
background-color: #f1f1f1;
color: #f40;
}
#team2 {
font-size: 30px;
background-color: #f40;
color: #f1f1f1;
}
</style>
</head>
<html>
<body>
<div id="team1">
<ol>
<li>Aman</li>
<li>Bharti</li>
<li>Uma</li>
</ol>
</div>
<div id="team2">
<ol>
<li>Manju</li>
<li>Shivang</li>
<li>Amit</li>
</ol>
</div>
</body>
</html>
salida
Aquí, el «team1» y «team2» son los selectores de ID que selecciona los elementos con id «team1» y «team2», y establecer los estilos CSS correspondiente.
6) Selector Niño
El selector de hijo se utiliza para seleccionar elementos con una matriz específica.
Sintaxis:
element>element
{
//css styling
}
Ejemplo:
<!DOCTYPE html>
<head>
<style>
div > h2 {
background: #f40;
padding: 2px;
font-size: 200%;
}
</style>
</head>
<html>
<body>
<div>
<h2>heading2</h2>
</div>
</body>
</html>
salida
Aquí, el elemento en el lado izquierdo de & gt; es el padre y el elemento de la derecha es el elemento de los niños.