El selector de destino se utiliza para representar un elemento único (el elemento de destino) con una identificación que coincide con el fragmento de la URL. Se puede utilizar para diseñar el elemento de destino activo actual. Las URL con un # seguido de un enlace de nombre de anclaje a un determinado elemento dentro de un documento. El elemento al que se vincula es el elemento de destino.
Sintaxis:
:target {
// CSS Property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS | :target Selector</title>
<style>
/* CSS property of target selector */
:target {
border: 2px solid #D4D4D4;
background-color: green;
color: white;
padding: 10px;
font-size: 20px;
}
</style>
</head>
<body style = "text-align:center">
<h2>
:target selector
</h2>
<p>
<a href="#geek">
Jump to Algorithms
</a>
</p>
<p id="geek">
<b>Algorithms</b>
</p>
</body>
</html>
Salida:
Antes de hacer clic en el enlace:
Después de hacer clic en el enlace:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>:target Selector</title>
<style>
.tab div {
display: none;
}
.tab div:target {
display: block;
color: white;
background: green;
padding: 5px;
margin: 20px 5px;
}
</style>
</head>
<body style = "text-align:center">
<h2>
:target selector
</h2>
<div class = "tab">
<a href = "#geek">Geeks Classes</a>
<div id = "geek">
<h3>Welcome to Geeks Classes.</h3>
<p>Hello World!</p>
</div>
</div>
</body>
</html>
Salida:
Antes de hacer clic en el enlace:
Después de hacer clic en el enlace:
Navegadores compatibles: los navegadores compatibles con :target Selector se enumeran a continuación:
- Apple Safari 3.2
- Google Chrome 4.0
- Firefox 3.5
- Ópera 9.6
- Internet Explorer 9.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA