• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Stylizacja a w ul > li elementu o dwóch klasach

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
600 wizyt
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

Witam,
muszę wystylizować link którego styl określony jest w dwóch klasach. Elementem tym jest li (list item) w liście która konstruuje menu. Parę rzeczy już zmieniłem, ale samo łącze linka determinuje wcześniej ustalona definicja a.
Co więcej, całość jest w Joomla, więc custom.css daje mi tylko ograniczone możliwości.

Pytanie brzmi - jakie w CSS wpisać kombo, aby określić atrybuty tego elementu?  Z góry dzięki za dopowiedzi

<div class="sp-module-content">
	<ul id="middle menu" class="nav menu">
		::before
			<li class="item-118">
				<a href="/www orla/index.php/kontakt-menu-middle">
					::before
					Zadzwoń: 61 666 666
				</a>
			</li>
			<li class="item-119">...</li>
			<li class="item-120">...</li>
			::after
	</ul>
</div>
.nav.menu > li
{
float:left;
list-style-type:none;
padding:20px;
background-color:#3B4952;
color: red;
}

.nav.menu
{
text-align:center;
margin-left:auto;
margin-right:auto;
border:1px solid #000;
background-color:#3B4952;
width:50%;
color: red;
}

.nav + .menu > ul > li > a         <!-- TU WŁAŚNIE JEST PROBLEM-->
{
color:#fff;
text-decoration:none;
list-style-type:none;
}

 

2 odpowiedzi

+2 głosów
odpowiedź 17 października 2019 przez mordimer Mądrala (5,720 p.)

Najprościej tak :

.sp-module-content .nav li a {

 //twoj kod

}

 

komentarz 17 października 2019 przez vingilot85 Obywatel (1,150 p.)
Działa, dzięki. Choć nie wiem czemu zadziałały wszystkie atrybuty poza list-style-type i nadal jest arrow.
jest na to może jakiś sposób?
komentarz 17 października 2019 przez mordimer Mądrala (5,720 p.)
Bo tamtym kodem łapiesz link a nie element listy ..  To ci złapie te elementy:

.sp-module-content .nav li{
        list-style-type: none
 }
komentarz 17 października 2019 przez vingilot85 Obywatel (1,150 p.)
Interesujące rzeczy się dzieją po zastosowaniu tego. Wszelkie atrybuty mogę w końcu zmieniać (jak font-size, font-weight), ale list-style-type:none, nadal nie daje rezultatu. Czy pseudoelement ::before nie będzie tu złej roboty robił? Firebug wskazuje, że ten element jest za ten znacznik (arrow) odpowiedzialny. Można go jakoś wykluczyć?
komentarz 17 października 2019 przez vingilot85 Obywatel (1,150 p.)
Zastosowałem :
.sp-module-content .nav li a::before
{
display:none;
}

i wszystko bangla:)
Dzięki za porady!
+1 głos
odpowiedź 17 października 2019 przez pablop76 VIP (123,460 p.)
edycja 17 października 2019 przez pablop76

Dodaj przyrostek klasy modułu i zwiększ specyficzność. Bo jak użyjesz modułu do innego menu to znowu będziesz miał problem.

 id="middle menu" czy to jest poprawne id?

komentarz 17 października 2019 przez vingilot85 Obywatel (1,150 p.)
Spróbowałem i mi całość zniknęła. Pewnie przez zmiany, które już w custom.css wprowadziłem. Jak nie uda się z tym z czym teraz kombinuję, wtedy się pobawię z opcją którą proponujesz.
Dzięki!
komentarz 17 października 2019 przez pablop76 VIP (123,460 p.)
Pamiętaj o spacji przed nową klasą, bo inaczej zmieniasz istniejącą.

Podobne pytania

0 głosów
3 odpowiedzi 1,237 wizyt
0 głosów
1 odpowiedź 176 wizyt
0 głosów
3 odpowiedzi 556 wizyt

93,111 zapytań

142,091 odpowiedzi

321,618 komentarzy

62,453 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...