[CSS]Css'owanie table Opcje

[konrados]

Cześć,

Gdzieś chyba popełniam bardzo głupi błąd, albo nie wiem jak działają selektory w css (chyba to drugie ). Mam taki kod:

[HTML] pobierz, plaintext 
 
<style>
.main_table>tr>td.left{
	color:red;
	width:200px;
}
/*to też nie wychodzi: */
.main_table>tr>td{
	color:red;
	width:200px;
}
</style>
 
<table class = 'main_table'>
	<tr>
		<td class = 'left'>jakiś tekst</td>
	</tr>
</table>
 
[HTML] pobierz, plaintext 

Jak widać, próbuję stylować td klasy .left. Wiem, że mógłbym zrobić:

[HTML] pobierz, plaintext 
.main_table .left{
	color:red;
	width:200px;
}
[HTML] pobierz, plaintext 

Ale mi właśnie zależy na tym, by zmienić styl dla klasy .left tylko na tym poziome, bo w main_table - tr - td - left będę miał inne elementy, których klasa też będzie miała nazwę 'left'. Czyli takie coś chcę zrobić:

[HTML] pobierz, plaintext 
<table class = 'main_table'>
	<tr>
		<td class = 'left'>
			<table class = 'sub_table'>
				<tr>
					<td class = 'left'>Left w sub_table</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
[HTML] pobierz, plaintext 

I chciałbym móc określić styl dla .left tylko na pierwszym poziomie, a nie na wszystkich.

Jak to mogę zrobić?

[CuteOne]

[HTML] pobierz, plaintext 
 
.main_table tr td.left { color: white; }
//lub prosciej
.main_table .left { color: white; }
 
.sub_table tr td.left { color: green; }
//lub prosciej
.sub_table .left { color: green; }
 
[HTML] pobierz, plaintext 

ps. co to za stylowanie skoro tworzysz sam sobie problemy...

Ten post edytował CuteOne 23.06.2011, 03:43:06

[konrados]

@CuteOne

Miałem mały urlopik, więc ze spowolnionym zapłonem odpowiadam, za co z góry przepraszam:)

Chodziło mi o ostylowanie tylko elementu .main_table>tr>td.left.

Rzecz w tym, że robiąc layout, często robimy klasę 'left' i 'right". Jest sobie np. główna strona, tam mamy 'menu' i 'content' - ja to lubię nazywać 'left' i 'right' (które siedzą w divie 'page'). Potem w 'content' znowu mamy np. 'articles' == listę ostatnich artykułów i znowu : 'left' dla zdjęcia i 'right' dla tytułu i treści. Ale w tejże klasie 'articles/right' znowu możemy mieć klasę 'left': dla 'tytuł i treść' oraz right dla 'różne operacje typu zagłosuj na ten artykuł'.

Tak więc często powtarza się schemat 'left' i 'right'. Do tej pory robiłem to na divach lub tables i zawsze nazywałem poszczególne klasy np. 'page_left' lub 'article_left' lub, no właśnie : 'article_left_left'.

Stąd, zainteresowałem się czy nie można tego zrobić lepiej, czyli stylować tylko 'dany div>left'.

[HTML] pobierz, plaintext 
<div class = 'left'>
 <div> coś w page-left</div>
</div>
<div class = 'right'>
 <div class = 'left'>coś w page-right-left</div>
 <div class = 'right''>coś w page-right-right</div>
</div>
[HTML] pobierz, plaintext 

I teraz, chciałem osobno stylizować page-left i page-right-left. Przy czym 'page-right-left' nie miało mieć właściwości 'page-left'.

Udawało mi się to z elementami typu div, p etc, ale nie wyszło mi z tabelką, i stąd moje pytanie.

Ale udało mi się znaleźć odpowiedź: w chromie kliknąłem na element tr...td..left i okazało się, że chrome (ale też i ff) "dorabia" dodatkowy nadrzędny element o nazwie 'tbody'.

Mamy więc tak naprawdę: .main_table>tbody>tr>td.left

Teoretycznie wiem, że tak powinna wyglądać poprawna tabelka (wiersze są w tbody) ale nie wiedziałem, że sobie przeglądarki w razie braku tbody dorabiają go samemu.

Tak więc odpowiedź na swoje pytanie znalazłem, ale mam w związku z tym dwa kolejne pytania:

Czy są inne tego typu pułapki, że sobie przeglądarka sama dodaje nowy element, w związku z czym stylowanie z użyciem operatora > nie działa? Oraz:

Czy moja koncepcja jest sensowna? Często w layoucie pojawiają się elementy klasy 'left', 'right', 'title', 'content', chciałem to jakoś uporządkować w html'u i cssi'sie.