recupere l'ancre en css et concatener

**H2R file comme l'aire** · 26/04/2017, 12h24

ce que je veut dire j'ai un :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
a[id="link"+:target]{
/*
 css rules
*/
}

Invité · 26/04/2017, 14h28

Bonjour,

pourquoi faire compliqué ?

1/ soit

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#linkgoogle, #linkyoutube {
/*
 css rules
*/
}

2/ ou encore (c'est tout l'intérêt des classes) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="#google" id="linkgoogle" class="link" >Google</a>
<a href="#youtube" id="linkyoutube" class="link">Youtube</a>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
a.link{
/*
 css rules
*/
}

**H2R file comme l'aire** · 26/04/2017, 17h40

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

recupere l'ancre en css et concatener [CSS 3]

CSS

Discussions similaires

Partager

Partager