How to implement :parent selector in css


Tags: css

Problem :

As shown in below code snippet I have got span elements within td. Also as mentioned in CSS section I have applied hover property for the DOM with class="open". The problem is I want to get whole td element to get highlighted upon hover, and not just the span element. I thought if some kind parent selector would be there in css, but unfortunately it doesn't. Is there any way out to get the desired result.

Thanx a lot in advance!!!!

<tr>                
    <td><span class="open">07</span></td>
    <td><span class="open">08</span></td>
    <td><span class="open">09</span></td>
    <td><span class="close">10</span></td>
    <td><span class="close">11</span></td>
</tr>

CSS:

.open:hover {
background-color: #42C0FB;
color: white;
cursor: pointer;
}


Solution :

Option 1, set the span to be 100% of the td width or if that's not desirable then option 2 is to target the td element instead.

Option 1
CSS:

.open:hover {
background-color: #42C0FB;
color: white;
cursor: pointer;
width: 100%;
}

Option 2
HTML:

<tr>                
    <td class="open"><span>07</span></td>
    <td class="open"><span>08</span></td>
    <td class="open"><span>09</span></td>
    <td class="close"><span>10</span></td>
    <td class="close"><span>11</span></td>
</tr>

    CSS Howto..

    How to add a value in the y-axis at the bottom of a bar chart-css

    How much time should I put into validating my HTML and CSS?

    How to make show/hide div with a toggle using CSS?

    How can I Add sub menus to dropdown menus?

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    JSF - How can I format my global messages in in a visually appealing way?

    How to style using nth-of-type within a ul tag?

    How can I find the CSS3 rotation of an element?

    How can I inject a static CSS File in GWT like it is done with JS Files?

    How to use Font Awesome for checkboxes etc

    How can I get Outlook to display my tables properly

    jQuery select box Show/hide div

    How to get logo to front layer

    How do I hide the li's that don't fit on a single line?

    How to make a div fill the height until the next absolutely positioned element

    How to make a button CSS change only IF form fields are valid

    How to use jQuery without making a mess? [closed]

    How to get style of a div from javascript file

    How to toggle a div to slide up and down

    How to style child components from parent component's css file?

    Show-hide based on two sets of selectors--how to make them work together?

    How to properly preload images, js and css files?

    How to center inside divs in a 1140px fluid responsive framework?

    How to align an image to the center with css?

    how to make shape with diagonal div?

    how to remove resize in text area tag

    How to properly separate pages in jQuery Mobile?

    How to keep footer at the bottom even with dynamic height website

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    How to change header and footer to full width