Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Info Coronavirus/Vaccinare vs Fake News

amenda ISU

Magazine macbook pro

Fața nevazuta a vestului civ...
 The Sandman (2022- )

Curatare jante aluminiu bicicleta

Plafoniera led cu backlight

Am pierdut contractul de munca, a...
 Certificat TVA pentru Auto SH de ...

Sectorul 4 ridica masini abuziv?

N-are vlaga in a 5 a

Motorul se supraincalzeste?
 Monitor max 24 inci , programare...

avarie usoara

KIA XCEED PE 1.5 T-GDi Hybrid Ele...

Rotoare, statoare și alte ge...
 

CSS: Cum pot sa am 2 stiluri/fonturi diferite la hyperlinks ?

* - - - - 1 votes
  • Please log in to reply
4 replies to this topic

#1
me_suzy

me_suzy

    Member

  • Grup: Members
  • Posts: 592
  • Înscris: 29.04.2007
Am acest css:

a, a:active, a:focus, a:hover {
text-decoration: none !important;
outline: none;
color: #007bff;
font-weight: bold;
}
a:focus, a:hover {
color: red;
font-weight: bold;
}
a, *::before, *::after, img, span, input, button, .navbar, .fixedmenu, .tp-bullet, .owl-dot, .owl-prev, .owl-next {
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}

Si am aceste 2 linkuri., page 1.html si page 2.html

<div class="single-post mx-1">
					 <i class="fa fa-calendar mx-1"></i>
					 <div class="text">
<a href="https://website.ro/page1.html" class="color-grey">Page 1</a>
					 </div>
				 </div>



<div class="single-post mx-1">
					 <i class="fa fa-calendar mx-1"></i>
					 <div class="text">
						 <a href="https://website.ro/page2.html" class="color-grey">Page 2</a>
					 </div>
				 </div>


Problema este ca al meu css le selecteaza pe amandoua cu rosu, bold.

Eu as vrea ca pentru cel de-al doilea link, adica page 2.html sa apara in culoarea albastra si la hover as vrea sa apara cu galben.

Cum sa construiesc CSS-ul pentru ca al doilea link sa fie diferit? Pe langa un nou CSS, trebuie sa adaug ceva la <div> ?

SOLUTIE 1
-----------------------------------------------------------

Una din posibilitati este sa faci o clasa noua:

.color-link-nou { color: #007bff;
font-weight: bold;
}


iar la linkul al doilea sa adaugi clasa:

<a href="https://website.ro/page2.html" class="color-link-nou">Page 2</a>

Edited by me_suzy, 18 February 2022 - 21:27.


#2
utopium

utopium

    Guru Member

  • Grup: Senior Members
  • Posts: 40,639
  • Înscris: 14.08.2007
Poti face reguli cu nth-child: https://developer.mo.../CSS/:nth-child ... primul copil al unui element are o culoare, al doilea are alta, al treilea alta ...

#3
Bogdan__26

Bogdan__26

    Junior Member

  • Grup: Junior Members
  • Posts: 39
  • Înscris: 26.01.2016
O alta solutie e sa targetezi link-ul dupa calea din href. In cazul tau:

a[href="https://website.ro/page2.html"] {
color: blue;
}

a[href="https://website.ro/page2.html"]:hover {
color: yellow;
}

O alta solutie e sa folosesti cum s-a zis mai sus nth-child(), doar ca acest lucru trebuie aplicat asupra elementelor cu clasa single-post.

.single-post:nth-child(2) a {
color: blue;
}

.single-post:nth-child(2) a:hover {
color: yellow;
}

O alta solutie e cea cu clasa custom pentru al doilea link.

#4
me_suzy

me_suzy

    Member

  • Grup: Members
  • Posts: 592
  • Înscris: 29.04.2007

View Postutopium, on 18 februarie 2022 - 21:31, said:

Poti face reguli cu nth-child: https://developer.mo.../CSS/:nth-child ... primul copil al unui element are o culoare, al doilea are alta, al treilea alta ...

salut, multumesc pentru raspuns. Dar nu am inteles multe din linkul tau ajutator. Daca ai putea sa aplici metoda din linkul tau in exemplul meu de mai sus, asa cum au facut ceilalti cu metoda lor, m-ai ajutat atat pe mine cat si comunitatea sa inteleaga mai usor.

Se intelege cel mai usor pe exemplul de caz. E nebunie felul cum este explicat acolo...

#5
Bogdan__26

Bogdan__26

    Junior Member

  • Grup: Junior Members
  • Posts: 39
  • Înscris: 26.01.2016

View PostBogdan__26, on 18 februarie 2022 - 21:39, said:

O alta solutie e sa targetezi link-ul dupa calea din href. In cazul tau:

a[href="https://website.ro/page2.html"] {
color: blue;
}

a[href="https://website.ro/page2.html"]:hover {
color: yellow;
}

O alta solutie e sa folosesti cum s-a zis mai sus nth-child(), doar ca acest lucru trebuie aplicat asupra elementelor cu clasa single-post.

.single-post:nth-child(2) a {
color: blue;
}

.single-post:nth-child(2) a:hover {
color: yellow;
}

O alta solutie e cea cu clasa custom pentru al doilea link.

Example la ce am zis mai sus:
https://jsfiddle.net/xq5muvp1/ solutia cu nth-child
https://jsfiddle.net/xq5muvp1/1/ solutia cu href

Anunturi

Chirurgia cranio-cerebrală minim invazivă Chirurgia cranio-cerebrală minim invazivă

Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne.

Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate