| Autor | Zpráva | ||
|---|---|---|---|
| Marťass Profil * |
#1 · Zasláno: 18. 2. 2019, 11:36:03
Ahoj, jak můžu nastavit css styl pouze odkazům když jsou takto vnořeny. Děkuji
<div class="menu">
<h2>MENU-1</h2>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<h2>MENU-2</h2>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div> |
||
| Mlocik97 Profil |
div.menu > ul > li > a {
//
}znak > znázorňuje hierarchiu že ako musia byť elementy vnorené aby sa na nich aplikovala css vlastnosť. To znamená že ak vložíte odkaz priamo do div.menu a nie konkrétne do ul li. Tak sa naň daná css vlastnosť neaplikuje. Ake je ten odkaz ale práve v elemente li, ktorý je v elemente ul, ktorý je v elemente div.menu tak sa aplikuje...
.menu > ul > li > a {
//
}viac info: Child combinator - CSS: Cascading Style Sheets | MDN |
||
| Tomášeek Profil |
#3 · Zasláno: 18. 2. 2019, 12:48:08
Marťass:
Zde bohatě postačí .menu a |
||
| Keeehi Profil |
#4 · Zasláno: 18. 2. 2019, 14:02:14
Mlocik97:
„znak > znázorňuje hierarchiu že ako musia byť elementy vnorené aby sa na nich aplikovala css vlastnosť.“
To není pravda. To co popisuješ se dá vyjádřit div.menu ul li a. Znak > určuje, že u toho zanořeného elementu musí jít o přímého potomka. Tedy že potomek musí být přímo v rodiči a ne až někde hlouběji ve struktuře. O čemž se ale vůbec nezmiňuješ.
|
||
| Trejpa Profil |
#5 · Zasláno: 18. 2. 2019, 15:38:45
Mlocik97:
Poučíš mě prosím, co ve tvém příkladě CSS znamenají dvě lomítka za sebou? |
||
| Marťass Profil * |
#6 · Zasláno: 18. 2. 2019, 16:00:38
Tak že to má být takto? Jenže to nefunguje:(
document.getElementsByClassName('.menu a').style.backgroundColor = 'orange'; |
||
| Keeehi Profil |
Metoda getElementsByClassName předně vrací pole objektů. Takže to pole pak musíš projít prvek po prvku a každému nastavit tu barvu zvlášť.
Za druhé má mít jako argument jméno třídy a ne css selektor . To o co se snažíš dělá metoda querySelectirAll. Nicméně, proč to děláš v javascriptu a ne v css. Pokud to má být obarvené jen občas, tak v některých případech jdou použít psoudo-třídy (:hover a jiné) a kdyby to bylo něco speciálního, tak to udeláš tak, že tomu rodičovské elementu (div s třídou menu) pridáš javascriptem nějakou třídu, třeba active a v css to definuješ takto:
div.menu.active a {
background-color: orange;
} |
||
| Trejpa Profil |
#8 · Zasláno: 18. 2. 2019, 16:59:30
Marťass:
Když pominu, že '.menu a' není className, tak takhle odkazy neobarvíš. Výsledkem getElementsByClassName je pole elementů. Nemůžeš obarvit pole. Vyhledáním odkazů v tomto poli bude také polem (getElementsByTagName), kterému opět nemůžeš přímo přiřadit barvu. Řešením je projít pole cyklem a obarvit položky každou zvlášť. Pokud bude ve tvém kódů <div class="menu"> pouze jednou, stačí projít cyklem jen odkazy v něm (v prvním):
<script>
var a=document.getElementsByClassName('menu')[0].getElementsByTagName('a');
for(i=0;i<a.length;i++){a[i].style.backgroundColor = 'orange';}
</script>Bude-li elementů s třídou menu více, je třeba projít dalším cyklem i všechny jejich výskyty. |
||
|
Časová prodleva: 5 let
|
|||
0