Selectores en CSS

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,

  1. selector universal
  2. Selector de etiquetas
  3. Agrupación selector de
  4. for selector de
  5. selector de ID
  6. 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

Selectors in CSS - 4

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

Selectors in CSS - 5

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

Selectors in CSS - 6

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

Selectors in CSS - 7

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

Selectors in CSS - 8

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

Selectors in CSS - 9

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.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *