CODEWITHSUNDEEP
htmlcssclasshtml-lists
Alan D H Kim
Alan D H Kim

Reputation: 21

Select one class within li of 2 classes (HTML, CSS)

html:

    <div id="calendar">
        <li class="day">
            <div class="date">4</div>
            <div class="event">
                <div class="event-description">
                    Concert
                </div>
            </div>
        </li>
    </div>

css:

#calendar .days li:hover {
    text-decoration: underline;
}

I want to text underline 4 but it only underlines Concert.. How can I only underline 4 and not underline Concert when I hover over my mouse on li??

Upvotes: 1

Views: 42

Answers (4)

Ehsan
Ehsan

Reputation: 12959

Use:

 #calendar .day:hover > .date {
    text-decoration: underline;
}


 #calendar .day:hover > .date {
    text-decoration: underline;
}
    <div id="calendar">
        <li class="day">
            <div class="date">4</div>
            <div class="event">
                <div class="event-description">
                    Concert
                </div>
            </div>
        </li>
    </div>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

Use the following:

#calendar li:hover  > .date {
  text-decoration: underline;
}

Upvotes: 0

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Try this

CSS

#calendar li.day:hover .date{text-decoration:underline;}

Working Fiddle

hope this helps..

Upvotes: 1

D3nj1
D3nj1

Reputation: 105

The easiest fix would be to add in style=" text-decoration: underline;" in the div that has the class: "date". But you should do that in a stylesheet if you haven't ^^

Upvotes: 0

Related Questions