Różnica w selektorach

Question

Witam czy mógłby mi ktoś wytłumaczyć różnicę między div>span a div span zapisaną w cssie? Wiem że w pierwszym sposobie ">" oznacza że span jest dzieckiem div, a w drugim przykładzie span jest potomkiem div. Czy będzie jakaś różnica lub inne ułatwienia jeżeli napiszę którymś z tych sposobów? Pozdrawiam!

Comments

Imo sobie odpowiedziałeś na to pytanie

---

znam teorie ale nie znam praktycznego wykorzystania czyli kiedy używa się tego a kiedy tamtego i jakie są różnice ;)

Answer 1

Znalazem odpowiedź na twoje pytanie.

https://css-tricks.com/child-and-sibling-selectors/

http://stackoverflow.com/questions/1182189/css-child-vs-descendant-selectors

W css-tricks masz przykłady.

<style>
ul li {
	color:green;
}
ul > li{ 
	color:red;
}
</style>
 
 
<ul> 
	<li>List item one</li>
	<li>List item two 
		<ol>
			<li>Nested item one</li>
			<li>Nested item two</li>	
		</ol>
	</li>
	<li>List item three</li>
</ul>

Powyższy przykład jest stąd.

https://www.w3.org/TR/selectors/#descendant-combinators

https://www.w3.org/TR/selectors/#child-combinators

Comments

Naprawdę wielkie dzięki! Pozdrawiam!

Answer 2

Witam.

<div>
  <span>dziecko div</span>
  <span>drugie dziecko div</span>
  <p><span>potomek div</span></p>
  <p><span>potomek div</span></p>
</div>

div > span
{
  color: red;
} 

usuń znak dziecka i zobacz efekt :)

Answer 3

Jest to tzw. silne wiązanie, przydatne przy dość rozbudowanych dokumentach , praktycznie w jakiś navbarach to widzę.

Drugie to nic innego, że przydzieli dla każdego div, span np: kolor czerowy , bez względu czy występuje między nimi wiązanie bądż nie.

Plus była metodyka CSS oparta o to, ale teraz nie mogę sobie przypomnieć jak się ona nazywała.