Selektory CSS

Wszystkie selektory pochodzą z bloga Maudlaisy od kochanej Caudire. Tam Znajdziecie więcej na ten temat :) 
Selektory są tu umieszczone za zgodą Caudire.


Selektory ogólne

body - cały blog, selektor ten może posłużyć nam np. do ustawienia tła całego bloga
.header - nagłówek bloga
.Header h1 - tytuł bloga (inaczej tytuł belki)
.main-inner - obszar wszystkich kolumn i pagera bloga 
#Blog1 - obszar postu (wraz z jego datą) i pagera bloga
.date-outer - obszar postu (wraz z jego datą) bez pagera bloga
.post-outer - obszar postu, bez jego daty i pagera bloga 
.footer-outer - stopka (na szerokości całego ekranu)
.footer-inner - stopka (jedynie na szerokości bloga)
.Attribution - napis na stopce
.navbar - pasek nawigacyjny na samej górze bloga
a:hover - wszystkie linki na blogu po najechaniu na nie myszką

Kolumny

.column-right-outer - ogólnie prawa kolumna, selektor ten może posłużyć nam np. do ustawienia tła w kolumnie 
#sidebar-right-1 - pojedyńcza prawa kolumna
#sidebar-right-2-1 - lewa podkolumna w prawej kolumnie 
#sidebar-right-2-2 - prawa podkolumna w prawej kolumnie 
.column-right-inner .widget - wszystkie gadżety w prawej kolumnie 
Aby zamienić selektor z prawą kolumną na taki z lewą, wystarczy w nazwie tego selektora right zastąpić wyrazem left.

Budowa posta

h2.date-header - obszar nagłówka z datą na szerokości selektora #Blog1
h3.post-title - cały obszar tytułu posta 
h3.post-title a - tylko tytuł posta
h3.post-title a:hover - tytuł posta po najechaniu na niego myszką
.post-body - obszar samej notki 
.post-footer - stopka posta 
.post-author - autor zawarty w stopce posta
.post-timestamp - godzina zawarta w stopce posta
.comment-link - ilość komentarzy zawarta w stopce posta
.post-footer-line-2 - etykiety zawarte w stopce posta
.blog-pager - obszar z przyciskami: starsze posty, nowsze posły, strona główna na szerokości selektora #Blog1 
.blog-pager a - tylko przyciski pagera bloga 
.blog-pager a:hover - przyciski pagera bloga po najechaniu na nie myszką
.feed-links - napis "Subskrybuj Posty: (Atom)" pod pagerem bloga
.comments h4 - duży nagłówek z ilością wszystkich komentarzy pod postem
.comment p - wszystkie komentarze, ten selektor może nam posłużyć np. do ustawienia tła, które będzie się pojawiać w każdym komentarzu
.avatar-image-container - wszystkie awatary obok komentarzy
.post-body img - wszystkie obrazki, które umieścimy w notkach, ten selektor może posłużyc nam np. do ustawienia tła pod obrazkami

Gadżety

.tabs-outer - ogólnie pasek z kartami (na całej szerokości ekranu) 
.tabs-inner - ogólnie pasek z kartami (jedynie na szerokości bloga)
.tabs-inner .widget li a - ogólnie karty
.tabs-inner .widget li.selected a - karty, które zostały już przez nas wcześniej odwiedzone
.tabs-inner .widget li a:hover - karty po najechaniu na nie myszką
h2 - nagłówki we wszystkich gadżetach
#BlogArchive1 - cały gadżet z archiwum bloga
#BlogArchive1 h2 - nagłówek gadżetu z archiwum
#BlogArchive1 a - linki w gadżecie z archiwum
#BlogArchive a:hover - linki w gadżecie z archiwum po najechaniu na nie myszką
#Stats1 - cały gadżet ze statystyką bloga
#Stats1 h2 - nagłówek gadżetu ze statystyką
.counter-wrapper - tylko licznik odwiedzin
#PageList1 - cały gadżet ze stronami bloga
#PageList1 h2 - nagłówek gadżetu ze stronami 
#PageList1 a - linki w gadżecie ze stronami
#PageList1 a:hover - linki w gadżecie ze stronami po najechaniu na nie myszką
#Label1 - cały gadżet z etykietami bloga
#Label1 h2 - nagłówek gadżetu z etykietami
#Label1 a - linki w gadżecie z etykietami
#Label1 a:hover - linki w gadżecie z etykietami po najechaniu na nie myszką
#Links1 - cały gadżet z linkami bloga
#Links1 h2 - nagłówek gadżetu z linkami
#Links1 a - linki w gadżecie z linkami
#Links1 a:hover - linki w gadżecie z linkami po najechaniu na nie myszką
#Text1 - cały gadżet z tekstem na blogu (#Text2 - drugi gadżet z tekstem, #Text3 - trzeci gadżet z tekstem itp.)
#Image1 - cały gadżet z obrazkiem na blogu (#Image2 - drugi gadżet z obrazkiem, #Image3 - trzeci gadżet z obrazkiem itp.)

Brak komentarzy:

Prześlij komentarz