Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Rename SQL column

Achiziționare tuner TV !

Din ce este facuta terasa asta?

Cum accesez site-ul CNAS ?
 Algoritm simplu de calculare al u...

Bitdefender Total Security ș...

casa verde 2024

Intrerupator cu N - doza doar cu ...
 Incalzire casa fara gaz/lemne

Incalzire in pardoseala etapizata

Suprataxa card energie?!

Cum era nivelul de trai cam din a...
 probleme cu ochelarii

Impozite pe proprietati de anul v...

teava rezistenta panou apa calda

Acces in Curte din Drum National
 

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: 746
  • Î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: 45,574
  • Î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: 746
  • Î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

Bun venit pe Forumul Softpedia!

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