recupere l'ancre en css et concatener
ce que je veut dire j'ai un :
Code:
<a href="#google" id="linkgoogle" >Google</a> et <a href="#youtube" id="linkyoutube">
je veut recuperer dans le css l'ancre et concatener
comme ca :
Code:
1
2
3
4
5
| a[id="link"+:target]{
/*
css rules
*/
} |
C'était pour un but précis
merci d'avoir voulu m'aider
en fait c'était pour faire un système d'onglet en html et css sans js et j'ai réussi
je vous me montre le code si vous pouver m'aider a l'ameliorer sa serait bien
code fichier html:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box-tab">
<div id="dailymotion" class="tabs">
Dailymotion est une entreprise française proposant, sur le site web du même nom, un service d'hébergement, de partage et de visionnage de vidéo en ligne.
</div>
<a href="#dailymotion" class="tabslink dailymotion">Dailymotion</a>
<div id="youtube" class="tabs">
YouTube est un site web d’hébergement de vidéos sur lequel les utilisateurs peuvent envoyer, évaluer, regarder, commenter et partager des vidéos. Il a été créé en février 2005 par Steve Chen, Chad Hurley et Jawed Karim, trois anciens employés de PayPal et racheté par Google en octobre 2006 pour la somme de 1,65 milliard de dollars4. Le service est situé à San Bruno, en Californie.
En 2009, environ 350 millions de personnes visitent chaque mois ce site de partage de vidéos5. En février 2017, YouTube annonce avoir franchi le cap du milliard d'heures de vidéos vues quotidiennement6. Le 28 octobre 2010, l'ensemble des chaînes de YouTube atteint le milliard d'abonnés7. À ce jour, la chaîne Youtube comptant le plus d'abonnés est celle de PewDiePie (plus de 50 millions en décembre 2016) et la vidéo la plus vue est Gangnam Style de Psy, postée en 2012, avec un total de plus de 2,7 milliards de consultations8.
</div>
<a href="#youtube" class="tabslink youtube">Youtube</a>
<div id="vimeo" class="tabs">
vimeo est un site web communautaire destiné au partage et au visionnage de vidéos faites par les utilisateurs, le site a été lancé en novembre 2004. Vimeo est une filiale du groupe américain IAC (InterActiveCorp).
</div>
<a href="#vimeo" class="tabslink vimeo">Vimeo</a>
<div class="noselect">
Veuiller selectionner un onglet
</div>
</div>
</body>
</html> |
code fichier css:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| .box-tab .tabs{
display: none;
}
.box-tab .tabs:target{
display: block;
position: absolute;
border-top: 3px solid black;
}
.box-tab .tabs:target + .tabslink{
background-color: black;
}
.box-tab .tabslink{
position: absolute;
background-color: lightgrey;
color: white;
border: 3px solid black;
text-decoration: none;
top: 10%;
}
.box-tab .tabslink.dailymotion{
left: 10%;
}
.box-tab .tabslink.youtube{
left: 20%;
}
.box-tab .tabslink.vimeo{
left: 30%;
}
.box-tab .tabs{
background-color: rgba(0, 0, 0, 0.7);
color: white;
top: 12.5%;
left: 10%;
width: 800px;
height: 400px;
z-index: 1;
word-wrap: break-word;
}
.box-tab .tabs:target ~ .noselect{
display: none;
}
.box-tab .noselect{
position: absolute;
top: 12.5%;
left: 10%;
background-color: black;
color: white;
width: 800px;
height: 400px;
} |
