CODEWITHSUNDEEP
htmlcss
Manali
Manali

Reputation: 128

Adjusting height of one of the Divs with only CSS

I am trying to achieve this shape enter image description here.

My current CSS gives me shape like this enter image description here.

The only thing I'm stuck at is reducing height of the first grey bar. All the 3 grey bars have same class (.ward) and I cannot use any javascript or inline styling to adjust height of the first rectangle(ward). How do I update height of first ward?

Here is my HTML snippet:

<div id="stem"></div>
<div id="wards">
    <div class="ward"></div>
    <div class="ward"></div>
    <div class="ward"></div>
</div>

Upvotes: 0

Views: 51

Answers (2)

meakeel
meakeel

Reputation: 305

If you add this css selector if will only apply to the first ward class.

.ward:first-child{
    height: 6px !important
}

More information on the first child selector - http://www.w3schools.com/cssref/sel_firstchild.asp

A good list of all the selectors you can use - http://www.w3schools.com/cssref/css_selectors.asp

Upvotes: 7

Casper_Evil
Casper_Evil

Reputation: 11

If I understand your question correctly. adding another class isn't breaking the rule of inline styling(especially if you are doing this in a separate CSS file). Why don't you try giving the first "ward" it's own CSS class.

Such as

<div id="stem"></div> <div id="wards"> <div class="specialward"></div> <div class="ward"></div> <div class="ward"></div> </div>

AND

.ward {
        /*border: 1px solid #666666;*/
        background-color: #666666;
        position: relative;
        display: inline-block;
        opacity: 1;
        width: 7px;
        height: 12px!important;
        margin-right: -8px;
        overflow: hidden;
    }

.specialward {
        /*border: 1px solid #666666;*/
        background-color: #666666;
        position: relative;
        display: inline-block;
        opacity: 1;
        width: 7px;
        height: 10px!important;
        margin-right: -8px;
        overflow: hidden;
    }

If you're question is more along the lines of; "Can I alter This div, using this class that the two other use. However the attributes of the same class needs to be different than the other two". I don't believe you can.

Hope this helps.

Upvotes: 0

Related Questions