Estoy haciendo un slider con solo css
y html
a traves del siguiente metodo ...
.city_slider_imgs
{
background-color : #0f0;
height : auto;
height : 50em;
margin : 50px;
}
:root
{
scroll-behavior: smooth;
}
a
{
text-decoration: none !important;
}
.img_container> img
{
width : 50em;
height : 50em;
position : absolute;
object-fit : contain;
opacity: 0;
left : 0%;
transition-property: opacity;
transition-duration : .3s;
}
.img_container > img:target
{
opacity: 1;
}
.ref_input
{
display: none;
}
.slider_controler
{
background-color : rgb(44, 173, 44);
display : inline-flex;
border-radius: 10px;
position : sticky;
top: 10%;
left: 20%;
margin : 10px;
z-index : 99;
justify-content :center;
padding : 10px;
}
.slider_controler > *
{
padding : 10px;
background-color : rgb(29, 206, 29);
margin : 10px;
border-radius : 10px;
transition-property: transform;
transition-duration : .3s;
transform: scale(1, 1);
color : #fff;
}
.slider_controler > *:hover
{
transform: scale(1.5, 1.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<section class="imgs_section" id ="imgs_section">
<h2 class = "section_title"> Images de la universidad, region y egresados notables </h2>
<div class="city_slider_imgs" id = "city_slider_imgs_id">
<div class = "slider_controler">
<a href = "#img1"> 1 </a>
<a href = "#img2"> 2 </a>
<a href = "#img3"> 3 </a>
</div>
<div class="img_container">
<img id = "img1" src = "<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<section class="imgs_section" id ="imgs_section">
<h2 class = "section_title"> Images de la universidad, region y egresados notables </h2>
<div class="city_slider_imgs" id = "city_slider_imgs_id">
<div class = "slider_controler">
<a href = "#img1"> 1 </a>
<a href = "#img2"> 2 </a>
<a href = "#img3"> 3 </a>
</div>
<div class="img_container">
<img id = "img1" src = "lorempixel.com/400/200" alt = "no se ha encontrado la imagen" title = "ciudad_1">
<img id = "img2" src = "lorempixel.com/400/200" alt = "no se ha encontrado la imagen" title = "ciudad_1">
<img id = "img3" src = "lorempixel.com/400/200" alt = "no se ha encontrado la imagen" title = "ciudad_1">
</div>
</div>
</section>
</body>
</html>
" alt = "no se ha encontrado la imagen" title = "ciudad_1">
<img id = "img2" src = "../../material/1542113135_776401_1542116070_noticia_normal.jpg" alt = "no se ha encontrado la imagen" title = "ciudad_1">
<img id = "img3" src = "../../material/imagen_de_universidad.jpg" alt = "no se ha encontrado la imagen" title = "ciudad_1">
</div>
</div>
</section>
</body>
</html>
El ejemplo quedo algo raro, el caso esta en que necesito alguna pseudo-clase
que referencie a los elementos a
cuando la terminacion de la url sea la del elemento al que estos referencian, de modo que cuando se este viendo una imagen ( es decir, que la terminacion de la url sea la misma que el id de la imagen ), el boton que la referencie adquiera un estilo diferente para diferenciar . Alguna idea?