En este artículo, veremos cómo podemos orientar componentes alrededor o dentro de otros elementos. Esta tarea se puede lograr usando el selector de destino.
El selector de destino en CSS se usa para representar un elemento único con un atributo de identificación que coincide con el fragmento de la URL y se puede usar para diseñar el elemento de destino actualmente activo. Las direcciones URL con un # seguido de un enlace de nombre de etiqueta de anclaje a un determinado elemento dentro de un documento y el elemento al que se vincula es el elemento de destino.
Sintaxis:
:target {
CSS Property
}
Ejemplo 1: en el siguiente ejemplo, veremos cómo apuntaríamos los componentes alrededor o dentro de otros elementos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS :target Selector</title>
<style>
body {
background-color: lightgrey;
}
button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
:target {
border: 2px solid black;
background-color: grey;
color: white;
padding: 5px;
font-size: 15px;
width: 250px;
margin-left: 200px;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Targeting the components around
or within other elements
</h3><br>
<p>
<button>
<a href="#gfg">
Click here to find GeeksforGeeks
</a>
</button>
</p>
<div id="gfg">
<h3>GeeksforGeeks</h3>
</div>
<div>
<h3>DSA</h3>
</div>
<div>
<h3>JAVA</h3>
</div>
<div>
<h3>Operating System</h3>
</div>
</body>
</html>
Producción:
Ejemplo 2: este es otro ejemplo que muestra cómo apuntaríamos los componentes alrededor o dentro de otros elementos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS :target Selector</title>
<style>
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* CSS property of target selector */
:target {
border: 2px solid black;
background-color: green;
color: white;
padding: 5px;
font-size: 15px;
}
</style>
</head>
<body style="text-align:center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Targeting the components around
or within other elements
</h3>
<p>
<button>
<a href="#i1">
Find gfg from paragraph one and make it bold.
</a>
</button>
</p>
<p>
<button>
<a href="#i2">
Find gfg from paragraph two and make it bold.
</a>
</button>
</p>
<div>
<p>This is
<i id="i1">gfg</i> paragraph one
</p>
</div>
<div>
<p>
This is <i id="i2">gfg</i> paragraph two.
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA