Selektory CSS

środa, 31 grudnia 2014

Napisałam dla Was już parę instrukcji, ale zdałam sobie sprawę, że nie przedstawiłam Wam najbardziej podstawowej rzeczy - selektorów CSS, które jakby nie patrzeć są potrzebne przy jakichkolwiek zmianach. Dlatego dziś przedstawię Wam listę tych selektorów.
Ostatnio dostałam kilka maili od osób z pytaniami "Jaki jest kod na wyśrodkowanie nagłówka" "Jak zmienić nagłówki gadżetów" i jeszcze wiele wiele więcej. Selektory pomogą Wam w otrzymaniu odpowiedzi na dane pytanie.

Selektory ogólne

body - odpowiada za cały blog
.content-outer -  Obejmuje on obszary - nagłówka, postów, kolumny bocznej, pagera.
 #Blog1 - odpowiada za obszar całego postu wraz z jego datą i pagerem bloga
.Attribution - podpis w stopce bloga czyli miejsce gdzie jest napis Technologia Blogger
.navbar - pasek nawigacyjny na górze bloga
.cookie-choices-info - ramka z informacją o ciasteczkach
.cookie-choices-info .cookie-choices-text - tekst (informacja o ciasteczkach)
.cookie-choices-info .cookie-choices-button - przyciski w informacji o ciasteczkach
a:hover - wszystkie linki po najechaniu na nie myszką
.feed-links - napis Subskrybuj: Posty (Atom)

Nagłówek

.header - nagłówek bloga
.Header h1 - tytuł bloga
.Header .description - opis bloga, pod nagłówkiem

Posty

.post-outer - odpowiada tylko za obszar postu, bez daty i pagera.
.date-outer - odpowiada za obszar całego postu wraz z datą bez pagera.
.date-header  lub h2.date-header - cały obszar nagłówka z datą (na całą długość postu)
.date-header span - tylko nagłówek z datą
.post-footer - stopka postu
h3.post-title - cały obszar tytułu wpisu (na całą długość)
h3.post-title a - tylko obszar tytułu wpisu
h3.post-title a:hover - tytuł postu po najechaniu na niego myszką
.post-author - autor w stopce wpisu
.comment-link - komentarze w stopce wpisu
.post-footer-line-2 - etykiety w stopce wpisu
.post-body  - obszar samego wpisu bez daty i tytułu wpisu
.post-body img  - wszystkie zdjęcia umieszczone w poście
.jump-link - przycisk czytaj więcej w poście
.jump-link:hover - przycisk czytaj więcej w poście po najechaniu na niego myszką
.post blockquote - cytaty w poście
.column-center-inner - odpowiada za obszar postu wraz z datą, stopką postu oraz pagerem.

Komentarze

.comment-header - nagłówek komentarzy z nazwą komentującego,datą i godziną. Przykład możecie zobaczyć u mnie na blogu
.comments h4 - nagłówek komentarzy nad wszystkimi dodanymi komentarzami pod postem.
.comment p  - wszystkie komentarze
.comments .comment .comment-actions a, .comments .thread-toggle a - przyciski odpowiedz i usuń pod komentarzem.
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń pod komentarzem po najechaniu na nie myszką.
.avatar-image-container - avatary obok komentarzy

Kolumna boczna

.column-right-inner - odpowiada za obszar całej prawej kolumny,selektor ten może nam posłużyć do ustawienia ramki kolumny lub tła
.column-left-inner - odpowiada za obszar całej lewej kolumny,selektor ten może nam posłużyć do ustawienia ramki kolumny,tła lub wielkości czcionki.
.column-right-inner .widget - dotyczy wszystkich gadżetów w prawej kolumnie
.column-left-inner .widget - dotyczy wszystkich gadżetów w lewej kolumnie

Gadżety

.sidebar .widget h2 - odpowiada za wszystkie nagłówki gadżetów w kolumnach bocznych
.widget h2 - odpowiada za wszystkie nagłówki gadżetów wraz z datą
.main-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów w kolumnach bocznych oraz za nagłówek z datą
#Label1  - cały obszar etykiet wraz z tytułem gadżetu.
.label-size a - tylko etykiety
#Label1 h2 - nagłówek gadżetu etykiety
#Label1 a:hover - linki etykiet po najechaniu na nie myszką
#BlogArchive1 - gadżet archiwum
#BlogArchive1 h2 - Nagłówek gadżetu archiwum
#BlogArchive1 a - linki w archiwum
#BlogArchive a:hover - linki archiwum po najechaniu na nie myszką
#ArchiveList  - sam lista archiwum bez nagłówka gadżetu
#Stats1  - gadżet statystyki
#Stats1 h2  - Nagłówek gadżetu statystyki
#Text1 - cały gadżet z tekstem, liczba 1 jest zmienna zależy od tego jaki nasz gadżet Tekst ma numerek, żeby to sprawdzić wystarczy wejść w układ-otworzyć nasz gadżet z Tekst i na górze przewinąć link do samego końca tam nam się pojawi jaki numer ma nasz gadżet.
#Image1 - cały gadżet z obrazkami na blogu, tutaj również liczba jest zmienna jak w przypadku gadżetu tekst i tak samo się to sprawdza.
#FollowByEmail1 - cały gadżet obserwuj przez e-mail
#HTML1 - cały gadżet HTML/JavaScript, tutaj również liczba jest zmienna jak w przypadku zdjęć i tesktu.
#Followers1 - cały gadżet z obserwatorami bloga
.popular-posts - cały gadżet popularnych postów
.popular-posts  .item-thumbnail img  - miniaturka popularnych postów
#BlogArchive1_ArchiveMenu - archiwum, styl menu
.FollowByEmail .follow-by-email-inner - gadżet obserwuj przez e-mail
.FollowByEmail .follow-by-email-inner .follow-by-email-address - pole do wpisywania adresu w gadżecie obserwuj przez e-mail
.FollowByEmail .follow-by-email-inner .follow-by-email-submit - przycisk do subskrypcji w gadżecie obserwuj przez e-mail

Strony/menu

.tabs-outer lub .tabs-inner - pasek stron
.tabs-inner .widget li a - same strony
.tabs-inner .widget li.selected a - aktywna strona tzn. strona na której obecnie się znajdujemy
.tabs-inner .widget li a:hover - strony po najechaniu myszką
#PageList1 - cały gadżet ze stronami
#PageList1 a - same strony
#PageList1 a:hover  - strony po najechaniu myszką

Stopka bloga/pager bloga

.footer-outer - stopka bloga
.footer-outer h2 - nagłówki gadżetów w stopce bloga
.blog-pager  - cały obszar pagera bloga (starsze, nowsze posty)
.blog-pager a - tylko obszar przycisków starsze, nowsze posty i strona główna
.blog-pager a:hover  - przyciski starsze, nowsze posty i strona główna po najechaniu na nie myszką
a.home-link - przycisk strona główna w pagerze bloga
a.home-link:hover - przycisk strona główna w pagerze bloga po najechaniu myszką
a.blog-pager-older-link - przycisk starsze posty
a.blog-pager-older-link:hover - przycisk starsze posty po najechaniu myszką
a.blog-pager-newer-link  - przycisk nowsze posty
a.blog-pager-newer-link:hover - przycisk nowsze posty po najechaniu myszką

Jeśli spodobał Ci się wpis, przekaż go dalej :)