I have multiple html elements. They use very similar css styles. Only difference is border style (one element has all but left border, another all but right etc).
So far, i used to create several different styles which have only one line of code different. That seriously bloated my css file. Is there any better solution to my problem? Is there any kind of inheritance that i could use?
There is many ways to achieve that.
Use multiple selectors:
selector #1, selector #2, selector #3 {
/* common styles */
}
selector #1 { border-left: none; }
selector #2 { border-right: none; }
selector #3 { border-top: none; }
Depending on document structure you can try something like this:
<ul>
<li>Element #1</li>
<li>Element #2</li>
<li>Element #3</li>
</ul>
ul li {
/* common styles */
}
ul li:first-child { border-left: none; }
ul li:last-child { border-right: none; }
Use multiple classes:
<ul>
<li class="border no-left">Element #1</li>
<li class="border">Element #2</li>
<li class="border no-right">Element #3</li>
</ul>
.border {
/* common styles */
}
.border.no-left { border-left: none; }
.border.no-right { border-right: none; }
:hover pseudoclass can be interpreted as " extra styles for indicated element", so input[type=button] { common-styles } input[type=button]:hover { specific-styles }
.x.y selector is well supported. Only old and dead IE6 had some troubles in some specific cases with that.You can declare an element with several classes
<div class="general-class left-border-class"></div>
<div class="general-class top-border-class"></div>
...
CSS
.border {
border: solid #555 2px;
width: 100px;
height: 100px;
}
.border.left {
border-width: 0 2px 0 0;
}
.border.right {
border-width: 0 0 0 2px;
}
HTML
<div class="border left"></div>
<div class="border"></div>
<div class="border right"></div>
In this particular scenario - where you have elements with different border styles - you can use the :first-child pseudo-class.
Live demo: http://jsfiddle.net/7WJe9/1/
