Los selectores se utilizan para seleccionar los elementos HTML en los atributos. Algunos tipos diferentes de selectores se dan a continuación:
- Selector de hermanos adyacentes: selecciona todos los elementos que son hermanos adyacentes de los elementos especificados. Selecciona el segundo elemento si sigue inmediatamente al primer elemento.
Sintaxis : selecciona etiquetas ul que siguen inmediatamente a la etiqueta h4.
html
h4+ul{
border: 4px solid red;
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>adjacent</title>
<style type="text/css">
ul+h4{
border:4px solid red;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
<li>Language</li>
<li>Concept</li>
<li>Knowledge</li>
</ul>
<h4>Coding</h4>
<h2>Time</h2>
</body>
</html>
Producción:
- Selector de Atributos: Selecciona un tipo particular de entradas.
Sintaxis:
html
input[type="checkbox"]{
background:orange;
}
Ejemplo:
html
<html>
<head>
<title>Attribute</title>
<style type="text/css">
a[href="http://www.google.com"]{
background:yellow;
}
</style>
</head>
<body>
<a href="https://www.geeksforgeeks.org">geeksforgeeks.com</a><br>
<a href="http://www.google.com" target="_blank">google.com</a><br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Producción:
- Selector de n de tipo: Selecciona un elemento a partir de su posición y tipos.
Sintaxis: seleccione una etiqueta de número en particular para realizar cambios.
html
div:nth-of-type(5){
background:purple;
}
Si queremos hacer cambios en todos, incluso li.
html
li:nth-of-type(even){
background: yellow;
}
Ejemplo:
html
<html>
<head>
<title>nth</title>
<style type="text/css">
ul:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul>
<li>C#</li>
<li>R</li>
<li>Matlab</li>
</ul>
</body>
</html>
Producción:
- Selector secundario directo: selecciona cualquier elemento que coincida con el segundo elemento que sea un elemento secundario directo de un elemento que coincida con el primer elemento. El elemento que coincide con el segundo selector debe ser el elemento secundario inmediato de los elementos que coinciden con el primer selector.
Sintaxis:
html
p > div {
background-color: DodgerBlue;
}
Ejemplo:
html
<html>
<head>
<title>child combinator</title>
<style type="text/css">
div > span {
background-color: DodgerBlue;
}
</style>
</head>
<body>
<div>
<span>inside div and is inside span</span>
<p>inside div but not inside span
<span>inside div p</span>
</p>
</div>
<span>not inside div</span>
</body>
</html>
Producción:
- Es diferente del selector de descendientes ya que el selector de descendientes selecciona el elemento que coincide con el segundo elemento que es un descendiente del elemento que coincide con el primer elemento (que puede ser el hijo, un hijo de su hijo, etc.).
- Selector general de hermanos: selecciona solo el primer elemento si sigue al primer elemento y ambos hijos son del mismo elemento padre. No es necesario que el segundo elemento siga inmediatamente al primero.
Sintaxis: Cambios en el contenido del elemento span que sigue a la etiqueta de párrafo y ambos tienen la misma etiqueta principal.
html
p ~ span {
color: red;
}
Ejemplo:
html
<html>
<head>
<title></title>
<style type="text/css">
p ~ span {
color: red;
}
</style>
</head>
<body>
<p>Coding is
<span>fun!</span>
</p>
<h1>GeeksforGeeks</h1>
<p>learn</p>
<span>Last span tag.</span>
</body>
</html>
Producción:
- Selector de elementos: Selecciona el texto encerrado dentro del elemento mencionado.
Sintaxis:
html
div {
background:green;
}
p {
color: yellow;
}
Ejemplo:
html
<html>
<head>
<title></title>
<style type="text/css">
div {
background:purple;
}
p {
color: yellow;
}
</style>
</head>
<body>
<div>
This is inside div element.
<p>Coding is fun!
GeeksforGeeks learn Last span tag.
</p>
div element is closing
</div>
</body>
</html>
Producción:
- Selector de ID: selecciona los cambios realizados en un texto específico en una página, ya que solo se puede usar una vez en una página.
Sintaxis:
html
# special {
color: yellow;
}
Ejemplo:
html
<html>
<head>
<title></title>
<style type="text/css">
#special {
color: blue;
}
</style>
</head>
<body>
<div>
This is inside div element.
<p>Coding is fun!</p>
<p>This is a paragraph.</p>
<p id="special">This paragraph is with "special" id.</p>
div element is closing
</div>
</body>
</html>
Producción:
- Selector de clase: es lo mismo que el selector de ID pero se puede usar varias veces en una página.
Sintaxis:
html
.highlight {
background: yellow;
}
Ejemplo:
html
<html>
<head>
<title></title>
<style type="text/css">
.highlight {
background: yellow;
}
p {
background: blue;
}
</style>
</head>
<body>
<p class="highlight"> This is inside the highlight</p>
<p>This is normal paragraph.</p>
</body>
</html>
Producción:
- Selector de estrellas: los cambios realizados se realizarán en toda la página.
Sintaxis:
html
*{
border:1px solid lightgrey;
}
Ejemplo:
html
<html>
<head>
<title></title>
<style type="text/css">
*{
border:1px solid lightgrey;
}
</style>
</head>
<body>
<p class="highlight"> This is inside the highlight</p>
<p>This is normal paragraph.</p>
</body>
</html>
Producción:
- Selector de descendientes: Realiza cambios solo en aquellos elementos que están dentro del otro elemento.
Sintaxis: seleccione todas las etiquetas de anclaje que están dentro del elemento ‘li’ que están dentro del elemento ‘ul’.
html
ul li a{
color: red;
}
Ejemplo:
html
<html>
<head>
<title></title>
<style type="text/css">
ul li a{
color:red;
}
</style>
</head>
<body>
<ul>
<li> This is inside first li element.</li>
<li>Coding is fun!
<li>
<li><a href="www.google.com">Click here to go to google.</a></li>
<li>The last li.</li>
</body>
</html>
Producción:
- Todos los selectores se usan juntos en el siguiente ejemplo:
html
<html>
<head>
<title>nth</title>
<style type="text/css">
#special{
color:red;
}
.highlight{
background: green;
}
ul:nth-of-type(2){
background:yellow;
}
ul+h4{
border:4px solid purple;
}
a[href="http://www.google.com"]{
background:yellow;
}
h1 ~ h4 {
color: red;
}
div > span {
background-color: DodgerBlue;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<ul>
<li>java</li>
<li>python</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul>
<ul>
<li>C#</li>
<li>R</li>
<li>Matlab</li>
</ul>
<h4>Coding</h4>
<div>
<span>inside div and is inside span</span>
<p>inside div but not inside span
<span>inside div paragraph</span>
</p>
<p class="highlight">inside div but not outside
span with class element.</p>
<p id="special">inside div but not outside span
with id element.</p>
<p class="highlight">inside div but not outside
span with another class element.</p>
</div>
<a href="https://www.geeksforgeeks.org">click here
for geeksforgeeks.com</a>
<a href="http://www.google.com" target="_blank">
click here for google.com</a>
</body>
</html>
Producción:
