CSS знак >

dakata__92

Super Moderator
Колеги къде мога да проверя този знак какво точно извършва в CSS, както и останалите подобни? Принципно ми стана ясно за какво е с един пример, но желая да го прегледам обстойно както и другите.

[css]
ul li:hover > ul{
display: block;
}
[/css]
HTML:
<ul>
<li>
<ul> block</ul>
</li>
</ul>
 
По такива въпроси обикновено има добри описания в stackoverflow:

http://stackoverflow.com/a/3225905/3132718

That means the selector div > p.some_class only selects paragraphs of .some_class that sit directly inside a div, not paragraphs that are nested further within.

[css]div > p.some_class[/css]
HTML:
<div>
    <p class="some_class">Some text here</p>     
    <blockquote>
        <p class="some_class">More text here</p> 
    </blockquote>
</div>
 
С принципа на проба грешка и сам го установих, че е така, но благодаря. Излезна ми втори логичен поне за мен въпрос. Има ли аналогичен на този знак, който селектира дива ? Например < или тоест огледално действащ символ ? :)
 
Идеята ми е че желая да добавям текст преди определена структура йерархия. Желая да добавям примерно само | черта на първият ul li a.
[css]
ul li a:before{
content: "|";
}
[/css]
HTML:
<ul>
<li><a href="index.php">Портфолио</a></li>
			<li><a href="index.php">Блог</a>
			<ul>
				<li><a href="index.php">Новини</a></li>
				<li><a href="index.php">Тестове</a></li>
				<li><a href="index.php">Кодове</a></li>
			</ul>
			</li>
		</ul>
Така добавям обаче прави черти и на връзките от вложеният ul в първичният ul.
 
dakata__92 каза:
Идеята ми е че желая да добавям текст преди определена структура йерархия. Желая да добавям примерно само | черта на първият ul li a...

:first-child пробва ли ?
 
Ако правилно съм те разбрал искаш вертикалната черта да се появява само преди главните елементи на менюто.

Вариант 1.

Код:
<ul id="main-menu">

</ul>

#main-menu > li a:before {
content: "|";
}
Ако не искаш да слагаш id на ul-a,
Вариант 2:

HTML:
<някакъв елемент, който е уникален за страницата (<header> или има #)>
<ul>

</ul>

</затваряне на уникалния елемент>
[css]header (или #нещо-си) > ul > li a:before {
content: "|";
}[/css]
 

Back
Горе