CSS, aby uzyskać <th> obecnego <td>?

Question

Próbuję podświetlić <th> z <td>, który obecnie znajduje się w powietrzu.

mogę podświetlić pierwszy <tr> używając:

#sheet tr:hover td:first-child { color:#000; background:#EAEAEA; } 

Czy istnieje sposób, aby zrobić to za <th>?

Uwaga - Używam zakresy dla <th>, jak to <th scope="col">, mogę to wykorzystać?

Uwaga 2 - Czy istnieje sposób na uzyskanie bieżącej kolumny?

Answer 1

Oto rozwiązanie JavaScript. Wiem, że naprawdę chcesz uzyskać odpowiedź na to tylko CSS, ale ponieważ nie jest to możliwe, starałem się zachować jak najwięcej w CSS:

Najpierw twoja tabela musi mieć colgroups. Jeden dla każdej kolumny.

<table class="coltest"> 
    <colgroup><col/><col/></colgroup> 
    <thead><td>Left</td><td>Right</td></thead>  
    <tbody> 
     <tr><td>1</td><td>2</td></tr> 
     <tr><td>3</td><td>4</td></tr> 
    </tbody> 
</table> 

Mam oświadczył również kilka prostych CSS, aby dołączyć do naszego col kiedy unosiła:

.colhover { 
    background-color: yellow; 
} 

I wreszcie jQuery ognia przy aktywowaniu:

$("table.coltest td").hover(function() { 
    // get the colgroup at this elements specific index (col1, col2, etc) 
    $("col").eq($(this).index()).addClass('colhover'); 
}, function() { 
    $("col").eq($(this).index()).removeClass('colhover'); 
}); 

To zdarzenie jest wyzwalany po mysz unosi się nad znacznikiem td, co powoduje, że cały obiekt jest częścią żółtego koloru.

Możesz zobaczyć przykład na jsfiddle here.

Answer 2

AFAIK nie jest możliwe przy użyciu samego CSS. Być może zainteresuje Cię to, chociaż wygląda na to, że wtyczka jQuery, do której odwołania znajdują się w komentarzach, jest bardziej niezawodna.

http://css-tricks.com/row-and-column-highlighting/

Answer 3

Judasz ma rację, że nie jest to możliwe z CSS sam. Powodem jest to, że chcesz kierować na dziecko rodzica rodzica i obecnie nie ma możliwości kierowania na rodziców za pomocą selektorów CSS.

Oto rozwiązanie wykorzystujące jQuery, które jest podobne do przykładu Jivings, z tym wyjątkiem, że używa znaczników <th> (zamiast grup colgroups) i podświetla tylko <th> zamiast całej kolumny. Drugi bit JS wyprowadza kolumnę, którą kręcisz.

http://jsfiddle.net/tracyfu/Xhs4N/

Answer 4

Jak wspomniano powyżej, nie ma sposobu, aby "wybrać" rodziców w CSS.

Specyfikacja CSS4 udostępnia funkcję do definiowania tematu selektora (który pozwala dopasować rodzica). Ale nawet przy tej nowej funkcji twoje żądanie jest nadal zbyt skomplikowane, a jedynym sposobem, aby to osiągnąć, jest używanie JavaScript.

Więcej informacji na ten temat tutaj:

Is there a CSS parent selector?

Answer 5

Jak inni zwrócili uwagę, nie jest obecnie możliwe tylko z CSS. Ale, podobnie jak ćwiczenia kodowania starałem się obrót stołu z transformacji CSS i następnie „unrotating” komórki, więc pierwsze dziecko kończy się nagłówek kolumny ...

.container { 
    float: left; 
    -webkit-transform: rotate(90deg) translate(-240px, -260px); 
    -moz-transform: rotate(90deg) translate(-240px, -260px); 
    -o-transform: rotate(90deg) translate(-240px, -260px); 
    -ms-transform: rotate(90deg) translate(-240px, -260px); 
    transform: rotate(90deg) translate(-240px, -260px); 
    color: #333; 
} 

table td, table th { 
    border: solid #eee 1px; 
    padding: 10px; 
} 

table tr:hover th:first-child { color:#000; background:#EAEAEA; } 
table tr:hover td { color:#000;} 

table th { 
    font-weight: bold; 
} 

table th, table td { 
    height: 200px; 
    width: 20px; 
} 

table th span, table td span { 
    display: block; 
    position: absolute; 
    -webkit-transform: rotate(-90deg) translate(-100px, 0); 
    -webkit-transform-origin: top left; 
    -moz-transform: rotate(-90deg) translate(-100px, 0); 
    -moz-transform-origin: top left; 
    -o-transform: rotate(-90deg) translate(-100px, 0); 
    -o-transform-origin: top left; 
    -ms-transform: rotate(-90deg) translate(-100px, 0); 
    -ms-transform-origin: top left; 
    transform: rotate(-90deg) translate(-100px, 0); 
    transform-origin: top left; 
} 

view demo in jsfiddle

To oczywiście tylko dla zabawy i powinno być nigdy znaleźć drogę do produkcji. Musisz dodać wiele znaczników, ponieważ wiele przeglądarek podskoczy, jeśli spróbujesz przekształcić komórki tabeli.

Teoretycznie powinno to być bardziej niezawodne z writing-mode, ale obecnie jest obsługiwane tylko przez IE9 +. Wyglądałoby to tak, jakby ...

table { 
    writing-mode: TB-LR; 
} 

table td, table th { 
    writing-mode: LR-TB; 
} 

Answer 6

Nie ma sposobu, aby przejść do drzewa za pomocą CSS, tylko poziomo i pionowo w dół. Tutaj masz wszystkie selektory, których możesz użyć: http://www.w3.org/TR/css3-selectors/. Nic nie idzie na drzewo ... Mam nadzieję, że źródło jest wystarczająco wiarygodne;).

Niestety, js jest twoim jedynym rozwiązaniem.