Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Unde torn detergentul lichid?!

Unde gasesc acest tip de bec ?!

Pentru cei ce stati la bloc, va s...

Necesar software pt. timeline
 Biodome 27/ Thermica carpatino

Nu pot accesa unele pagini

Experiente cu mecanicii auto

La Digi de la Vodafone
 Creveti

Sare siguranta cand pornesc masin...

Verificare structura de rezistent...

Masina nr 2 - 90% oras, benzina, ...
 Tratament ortodontic

Passat B5 2000, fum

navigația auto nu porneș...

Demontare plastic hayon Seat Ateca
 

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: 628
  • Î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: 41,808
  • Î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: 628
  • Î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 endoscopică a hipofizei Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

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