1. div>h1 { color: red;}
- means all h1 that are child to div will get that CSS, but not sub child.
examples:
<div>
<h1>this is red</h1>
</div>
<div>
<p>
<h1>this is not red</h1>
</p>
</div>
2. p+h1 {color:red}
- means make red h1 in case if it is going just after p on the same level
examples:
<div>
<p></p>
<h1>this is red text</h1>
</div>
<div>
<p></p>
<h2></h2>
<h1>this is not red text</h1>
</div>
3. p~h1 {color:red} (similar to +)
- means make red h1 in case if it is on the same level with p
<h1>this is red</h1>
</div>
<div>
<p>
<h1>this is not red</h1>
</p>
</div>
2. p+h1 {color:red}
- means make red h1 in case if it is going just after p on the same level
examples:
<div>
<p></p>
<h1>this is red text</h1>
</div>
<div>
<p></p>
<h2></h2>
<h1>this is not red text</h1>
</div>
3. p~h1 {color:red} (similar to +)
- means make red h1 in case if it is on the same level with p
examples:
<div>
<p></p>
<h1>this is red text</h1>
</div>
<div>
<p></p>
<h2></h2>
<h1>this is also red text</h1>
</div>
4. p:first-child {color:red}
- means make red p in case if it is first child
examples:
<body>
<p>This is red text</p>
<p>This is not read</p>
</body>
</div>
<div>
<p></p>
<h2></h2>
<h1>this is also red text</h1>
</div>
4. p:first-child {color:red}
- means make red p in case if it is first child
examples:
<body>
<p>This is red text</p>
<p>This is not read</p>
</body>
4 comments :
good to know
I knew about the first one div>h1 {...}, but not the 2 others.
Will make sure to think it into my CSS. Thanks.
Great post!
There are also the first-child and like pseudo-element selectors in CSS dealing with element nodes/subnodes which can be amazingly useful.
eg., http://www.w3schools.com/css/pr_pseudo_first-child.asp
thanks Chris,
I've updated post, included it there also.
Post a Comment