Some Html CSS tips and tricks Trick No. 1:We often need to use clear in our html so insted of using:
<
div
style
=
"clear: both"
></
div
> OR <
div
class
=
"clear"
></
div
>
We can make use of pseudo selector :after,like this: ———–
.container {
/*dummy attributes*/
height
:
100%
;
width
:
100%
margin
:
5px
;
}
.container :after {
display
:
block
;
clear
:
both
;
content
:
" "
;
height
:
0
;
overflow
:
hidden
;
}
.container childDiv {
float
:
left
;
}
——
It makes more sense if we are using LESS,as we can create a mixin for this as:
.clearfix() {
&:after {
display
:
block
;
clear
:
both
;
content
:
" "
;
height
:
0
;
overflow
:
hidden
;
}
}
and then we can call this in our class,like this:
.container {
/* this div has two floated child,*/
/* so we must clear left/right after this div.*/
/* calling the mixin,which will take care of clear.*/
.clearfix;
.div
1
{
float
:
left
;
}
.div
2
{
float
:
right
;
}
}
Trick No. 2: last-child/first-child are another pseudo selector,which are very useful,so if we want to apply some additional attributes to last/first child of certain class,we can use these selector. This is how these can be used:
.class-name {
/* dummy attributes */
height
:
100%
;
width
:
100%
margin
:
5px
;
}
.class-name:last-child {
margin
:
0px
;
}
Trick No. 3:To select the next element, we can use + selector:
.class-name + span {
/*dummy attributes*/
height
:
100%
;
width
:
100%
margin
:
5px
;
}
it will select the next span element. We can also select the next element with class name.
.class-name + .some-class {
/* dummy attributes */
}
Trick No. 4:If we want to make some portion of image clickable (hot spot),then we can insert an anchor with absolute position, e.g.:
.container {
background
:
url
(
'../images/container-bg.png'
)
no-repeat
;
height
:
75px
;
width
:
75px
;
position
:
relative
;
}
.hot-spot {
position
:
absolute
;
bottom
:
0
;
right
:
0
;
height
:
28px
;
width
:
28px
;
display
:
block
;
content
:
""
;
}
HTML for this
<
div
class
=
"container"
>
<!-- We can place this anchor anywhere under this div -->
<
a
class
=
".hot-spot"
href
=
"#"
alt
=
"hot spot"
></
a
>
<!-- dummy text -->
<
p
>
Lorem ipsum dolor sit amet.Etiam a ipsum id purus.
</
p
>
<
div
>
Note: if the element is positioned absolute, then its parent must be positioned relative.
Trick No. 5: For browser specific css, instead of creating different css/less files we should use this:
<!--[if IE 8 ]><head class="ie8"><![endif]-->
<!--[if (IE 9) |!(IE)]><!-->
<
head
>
<!--<![endif]-->
And define this class “ie8″ in the same css/less file. Happy Coding!!