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>
