Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are "div > p" & "div p" same?

Tags:

Hey, I've an obvious question.

For code like:

<div>      <p>We want to format this text :)</p> </div> 

Some people use selector like:

div > p {      something } 

And others:

div p {      something } 

What's the difference in this case? In my opinion - none?

And by the way, isn't the descendant item always a child?! What's the difference between the two? I'm reading w3.org but can't get it :)

Thank you!

like image 229
fomicz Avatar asked Oct 16 '10 12:10

fomicz


People also ask

What does div p mean?

div > p. Selects all <p> elements where the parent is a <div> element. element+element. div + p. Selects the first <p> element that is placed immediately after <div> elements.

What is difference between div p and div p?

[div > p] selects only the p that are children of the div. So if you had a div with lists or whatever inside that had their own p, their properties would not be affected by this selector. [div p] selects all descendant p in the div. So any p that is inside, or descendant, of a div would be affected.

What is the correct statement about div p?

Right Answer is: The syntax div ~ p will select the paragraph elements that are the siblings of the div element.

How do I use div p?

A p tag is for a paragraph, generally used for text. A div tag is for division, and generally used for creating sections of text. Show activity on this post. <p> is semantically used for text, paragraphs usually.


1 Answers

Simple:

 div > p 

affects only direct children.

 div p 

affects grandchildren, grandgrandchildren etc. as well. (Won't make a difference in your example)

The child selector isn't supported by IE6.

like image 98
Pekka Avatar answered Sep 21 '22 19:09

Pekka