diaryCSS+: Справочник селекторов

Полный справочник селекторов CSS для diary.ru
Обсуждение, решение проблем в diaryСSS.

Был создан и наполнялся Ri, жил тут, все еще можно достать из кеша гугла.

Есть еще упрощенный наглядный вариант в вики дневничков.

Общая информация

Селектор определяет, для каких объектов будут применяться указанные свойства.
В коде CSS это записывается так:
селектор { свойства }

Полужирным шрифтом выделены основные селекторы, за ними следуют описания соответствующих им объектов.

После описания в скобках могут быть указаны селекторы для внутренних элементов объекта. В случае, если основной селектор не производит нужный эффект, стоит попробовать задать стиль для селектора внутреннего элемента.

Надпись (input, label) после селектора #id для управляющего элемента означает, что можно использовать селекторы #id input и #id label для доступа к переключателю и надписи соответственно.

Настоятельно рекомендую научиться использовать FireBug и не париться с поиском нужных селекторов.

В двух словах: во всех браузерах можно кликнуть правой кнопкой мыши по любому элементу, выбрать "Inspect element", посмотреть селектор и какие стили применяются к элементу.

Запись и комментарий

Внешняя оболочка поста

.singlePost — любой пост
.first — первый пост на странице
.countFirst — нечетные посты
.countSecond — четные посты
#post0 — эпиграф
.singleComment — комментарий

Cледующие классы относятся и к постам, и к комментариям.
.postTitle — заголовок поста
.postTitle span — время
.opac6 — значок закрытой записи
Информация об авторе

.communityName — название сообщества (.communityName a)
.authorName — автор записи (.authorName a)
.postContent — блок с аватаркой, подписью и текстом
.commentAuthor — блок с аватаркой и подписью
.avatar — аватарка (.avatar img)
.sign — подпись под аватаркой

.postInner — оболочка текста и тегов
.paragraph — текст и теги
Текстовое содержимое

.paragraph div — текст
.smile — смайлы в тексте
.LinkMore — ссылки MORE
.voting — блок голосования
.atTag — темы
.atTag span — надпись "@темы:"
.atTag a — ссылки на темы
.atMusic — музыка
.atMusic span — надпись "@музыка:"
.atMood — настроение
.quote_text — цитированный текст
.eot — оффтопик

.postLinksBackg — ссылки внизу поста
.urlLink — URL (.urlLinks a)
.postLinks — остальные ссылки
Ссылки

.lastLink — последняя из ссылок (.lastLink a)
.addToQuote — в цитатник (.addToQuote a)
.subscribe — подписаться (.subscribe a)
.unsubscribe — отписаться (.unsubscribe a)
.quote_post — написать у себя (.quote_post a)
.umail — u-mail (.quote_post a)
.diary — дневник (.quote_post a)
.profile — профиль (.quote_post a)
.comments — комментарии (.comments a)
.comments_count_link — скобки, запятые в к-ке комментариев
.comments_count_link a — к-во комментариев (ссылка)

.prevnext — предыдущая и следующая записи

.prevPostLink — предыдущая (.prevPostLink a)
.nextPostLink — следующая (.nextPostLink a)

Служебные страницы

.tags_ul_all — список тем на отдельной странице

.tags_header — надписи "название" и "количество"
.tags_ul_all a — ссылка на тему
.tags_ul_all span — количество

#JournalCalendar — календарь записей

.calHeader — заголовок "календарь записей"
#JournalCalendar a — ссылки
#JournalCalendar a b — ссылка на не текущий год
.calnd — календарь на месяц
.cal-mnth — название месяца
.cal-head — дни недели
.cal-head small — числа
.cal-head a small — числа, для которых есть записи
.flwin — всплывающая подсказка
.flwin strong — заголовок подсказки
.flwin em — текст подсказки

Форма добавления комментария

#addCommentArea_title — заголовок "добавить комментарий"
#formcontainer — оболочка формы
#msg_form — форма
#from_form — переключатель, от кого добавлять комментарий

#fromMyself_box — от себя
#fromMrX_box — анонимно
#fromMrX3_box — OpenID
#fromAnother_box — от другого пользователя (input, label)
#open_id_com — оболочка поля ввода OpenID и двоеточия перед ним
#open_id_com input — поле ввода OpenID
#from_another — форма ввода логина и пароля для комментирования от другого аккаунта
#fromAnotherName — логин
#fromAnotherPass — пароль

#change_bg_area_comm — галочка "прозрачные поля" (input, label)
#forTextarea — редактор и смайлы
#htmlbox — редактор
#javabut — кнопки
#codebuttons — тоже кнопки
#message — текст сообщения
#shsmile — смайлы

#favSmilesGroups — выбор группы смайлов и любимые смайлы
#EditFavSmileysLink — ссылка на редактирование любимых смайлов
#SelectSmileGroup — выпадающий список групп смайлов
#favSmiles — список смайлов
.SmilePanelElement — смайл с надписью
.SmilePanelElement small — надпись
.SmilePanelElement img — картинка смайла

Опции комментария

#ReplaceBrDiv — не заменять переносы строки на <br> (input, label)
#change_avatar_box — использовать аватар (input, label) (платный сервис "аватары")
#change_avatar_box a — выбор другого аватара
#AvatarSelector — выбранный аватар
#subscribeToComments_box — подписаться на комментарии
#doNotSmile_box — не заменять текстовые смайлы на графические
#addPicture_box — прикрепить изображение
#addPictureSection — форма выбора файла изображения

#btSubmit — кнопка отправки комментария

Дополнительные элементы

#add_block1, #add_block2, ... #add_block7 — блоки для вставки дополнительных изображений
#extratop, #extrabottom — дополнительные блоки сверху и снизу
.postDate — дата (.postDate span)
.countFirstDate — дата у нечетного поста
.countSecondDate — дата у четного поста
#commentsArea_title — надпись "комментарии"
#newCommentsArea .header — надпись "Новые комментарии с последней страницы"
#cc — всплывающий блок "вставить цитату"
#msgWin — сообщение об ошибке

#msgTitle — заголовок
#msgTitleText — текст в заголовке
#msgWin .std_submit — кнопка закрытия
.msgErr — блок текста ошибки (в фоне прописана картинка)
#msgTextContent — текст ошибки
#msgWinCloseBt — OK

.menuSection — все секции
.menuSection ul — фон выпадающего меню
.menuSection li — все элементы меню
.menuSection a — все ссылки меню
.menuSection_title — все заголовки меню
#thisDiaryOwner — меню владельца дневника

#thisDiaryOwner ul — фон выпадающего меню
#thisDiaryOwner_title — записи
#writeToAuthor — написать на U-mail
#subscribeEmail — подписаться на дневник
#unsubscribeEmail — отписаться от дневника
#addToFav — добавить в избранное
#delFromFav — удалить из избранного
#tagslistlink — темы записей
#postsCalendar — календарь записей
#rssLink — RSS дневника
#upInChart — поднять в списке

#thisDiaryLinks — меню текущего дневника

#thisDiaryLinks ul — фон выпадающего меню
#thisDiaryLinks_title — дневник
#authorFav — избранное автора
#authorQuot — цитатник автора
#authorLinks — ссылки автора
#authorAlbum — альбом автора
#joinThisCommunity — вступить в сообщество
#writeThisCommunity — написать в сообщество
#communityDraftLink — мои черновики в сообществе
#communityMyPosts — мои записи в сообществе
#communityFav — избранное сообщества
#communityQuote — цитатник сообщества
#communityAlbum — альбом сообщества
#leaveThisCommunity — покинуть сообщество

#myDiaryLinks — меню моего дневника

#myDiaryLinks ul — фон выпадающего меню
#myDiaryLinks_title — мой дневник (заголовок)
#headlineList — список заголовков
#tagslistlink — темы записей
#myDiaryLink — мой дневник
#writeThisDiary — новая запись
#myDraftLink — черновики
#umailLink — u-mail
#myNotepadLink — блокнот
#myFavLink — избранное
#myQuotLink — цитатник
#discussionLink — дискуссии
#myLinksLink — мои ссылки
#myProfileLink — мой профиль
#albumLink — альбом
#optionsLink — настройки
#photolibLink — библиотека изображений
.count_box — количество новых комментариев или черновиков, с тире и скобками
.count_box span — количество новых комментариев, только цифра

#globalLinks — главное меню

#globalLinks ul — фон выпадающего меню
#globalLinks_title — главное меню
#allDiaryLink — все дневники
#mainpageLink — главная страница
#favListLink — список избранных
#pchListLink — список ПЧ
#communityCatalogueLink — каталог сообществ
#myCommunitiesLink — мои сообщества
#myCommunityLink — моe сообществo
#randomDiaryLink — случайный дневник
#diarySpiritLink — @дневники: изнутри
#diarySupportLink — техподдержка
#faqLink — FAQ

#lastComments — последние комментарии (если включены)
#pchs — ПЧ

#pchs ul — фон выпадающего меню
#pchs_title — ПЧ, заголовок (#pchs_title b)
#pchs li — список ПЧ с запятыми
#pchs a — ссылки на ПЧ

#myLinks — мои ссылки (#myLinks li, #myLinks a)

#myLinks ul — фон выпадающего меню
#all_links — заголовок "ссылки"
#myLinks a — каждая ссылка
#myLinks li:nth-child(3) a — вторая из ссылок (цифре 1 соответствует заголовок); не поддерживается в IE и FF<3.5

#Stats — статистика дневника
#iAmQuit — секция выхода и перелогинки

#iAmQuit b — выход
#more_login — войти под другим именем (#more_login a)
#login_change — форма перелогинки
#usrlog — логин
#usrpass — пароль
#open_uri — OpenID
#save — запомнить
.std_submit — войти

#side h1 — название дневника (#side h1 a)
#YaSearch — блок поиска по дневнику

#YaSearch_title b — фраза "Поиск"
#YaSearchForm_title b — фраза "Поиск по дневнику"
#YaSearchForm — форма поиска
#yaquery — строка поиска

#thisDiaryInfo — владелец дневника

#authorName — логин (#authorName span)
#thisDiaryPhoto — фотография

#TagsList — список тем
#TagsList span — число постов в теме
#TagsList a — название темы

Оболочки и дополнительные элементы

body — вся страница
#side — оболочка меню
#page-c — оболочка постов
#page-t — внутренняя оболочка постов
#postsArea — еще более внутренняя оболочка постов
#epigraph — оболочка эпиграфа
#commentsArea — оболочка комментариев
#newCommentsArea — новые комментарии (появляется, если вы отправляете комментарий, находясь не на последней странице комментариев)
#addCommentArea — оболочка формы добавления комментария

Разные стили для разных типов страниц

Если вы хотите, чтобы некоторые стили применялись только на некоторых
типах страниц, вставьте перед их селекторами следующие:
#Journal — дневник, а также редактирование записи или комментария
#JournalComments — комментарии
#JournalDraft — черновики
#JournalFavorite — избранное
#JournalAlbum — альбом
#JournalCalendar — календарь записей
#JournalLinks — страница моих ссылок
Например: #JournalComments a { color:green } — изменяет цвет ссылок на странице комментариев.

Элементы управления

.order_button — кнопки сортировки записей

#sortFromBegin — сортировать в порядке следования
#sortFromEnd — сортировать в обратном порядке
#sortFromLastComment — сортировать по последним комментариям

#bottomNav — ссылки навигации внизу страницы

#bottom_up — наверх
#bottom_mainlink — на главную
#bottom_randomlink — случайный дневник
#bottom_spiritlink — дневники: изнутри
#bottom_faqlink — FAQ
#Stats — статистика (находится внизу, если меню вверху)

#topNav — ссылки навигации вверху страницы

#top_up — наверх
#top_mainlink — на главную
#top_randomlink — случайный дневник
#top_spiritlink — дневники: изнутри
#top_faqlink — FAQ

.postActionLinks — кнопки управления постом

.upPostLink — поднять
.delPostLink — удалить
.editPostLink — редактировать
.tonotepadPostLink — перенести в блокнот
.fromnotepadPostLink — перенести в черновики из блокнота

Для доступа к ссылке внутри блока: #(id) a
Для доступа к изображению на кнопке: #(id) img
#pageBar — переключатель страниц

.pages_str — предыдущая, следующая
#pageBar a — все ссылки переключателя страниц
#pageBar strong — текущая страница

Комментарии к статье Ri

Marked (09.03.10 00:04):
Добавьте еще #thisDiaryOwner ul, #myDiaryLinks ul, #globalLinks ul, #myLinks ul - это бэкграунд выпадающий блоков для верхнего меню.

Marked (13.03.10 17:16):
Еще забыли #YaSearch - поиск.

boko (18.07.10 18:52):
#new_post_title - заголовок "Ноавя запись" на странице создания записи

tancka (15.08.10 15:04):
Здравствуйте, добавьте еще #JournalQuote в типы страниц - цитатник.

loa (30.08.10 05:33):
#authorLinks — ссылки автора
на самом деле там должно быть #authorLiks. грамматически верный вариант не работает, в отличие от...

Dagedra (31.10.10 10:55):
#login_form_title меню входа

boko (03.05.11 21:17):
#thisCommunityMember
#thisCommunity
http://diarycss.diary.ru/p157650008.htm

boko (09.10.11 23:34):
.paragraph .TagL — тег [L], ники и обращения в записях и комментариях
.paragraph .TagJIco — иконка собачки возле

Обсуждение, решение проблем в diaryСSS.

Сайт управляется системой uCoz