Thursday, December 23, 2010

CSS staff you have to know

I'm sure most of you have worked with CSS. I'm sure many of you know that, but some do not, so here are some nice practices that can help you.
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
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>

4 comments :

Andriy Kuba said...

good to know

Tue Skaarup said...

I knew about the first one div>h1 {...}, but not the 2 others.

Will make sure to think it into my CSS. Thanks.

Chris Toohey said...

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

Dmytro said...

thanks Chris,

I've updated post, included it there also.