Useful CSS selectors to add to your stylesheets

The following selectors can be really useful when styling your sub-theme. These class names come from Drupal core and the Zen 7.x-5.x base theme.

Selectors from Zen's page.tpl.php

#skip-link {} A skip link for accessibility.
#page { } Wrapper for the entire page.
#header {} Wrapper for the header area.
#logo {} Wrapping link for logo.
#name-and-slogan {} Wrapper for website name and slogan.
#site-name {} The name of the website.
#site-slogan {} The slogan (or tagline) of a website.
#secondary-menu {} Wrapper for the secondary menu links when using the “Secondary menu” feature in the theme’s settings.
.region-header {} Wrapper for any blocks placed in the header region.
#main {} Container for the content and sidebar columns.
#content {} Wrapper for the content column.
.region-highlighted {} Wrapper for the highlighted region.
.breadcrumb {} The path to the current page in the form of a list of links.
h1.title {} The title of the page.
div.messages {} Important messages (status, warning, and error) for the user.
div.status {} Normal priority messages.
div.warning {} Medium priority messages.
div.error {} High priority messages.
.tabs {} Wrapper for the page’s tabs.
ul.primary {} Primary tabs.
ul.secondary {} Secondary tabs.
.region-help {} Help text on a page.
.action-links {} Actions local to the page.
.region-content {} Wrapper for the actual page content.
#navigation {} The navigation bar.
#main-menu {} Wrapper for the main menu links when using the “Main menu” feature in the theme’s settings.
.region-navigation {} Wrapper for the navigation region.
.region-sidebar-first {} First sidebar (on left in LTR languages, on right in RTL).
.region-sidebar-second {} Second sidebar (on right in LTR languages, on left in RTL).
#footer {} Wrapper for the footer area.
.region-bottom {} Wrapper for any blocks placed in the page bottom region. This appears below the footer area by design.

Selectors from some of Drupal 7’s content

.links {} List of links generated by theme_links().
.inline {} List of inline links.
tr.even {}
tr.odd {} Some tables have zebra stripes with rows marked even or odd.
.more-help-link {} Link to more help.
.feed-icon {} The link to the RSS or Atom feed for the current list of content.
.more-link {} Aggregator, blog, and forum more link.
.pager {} A list of page numbers when more than 1 page of content is available.
.pager li {} Each page number in the pager list.

Selectors from Zen’s block.tpl.php

.block Block wrapper.
.block.first {} The first block in the region.
.block.last {} The last block in the region.
.block.odd {} Zebra striping for each block in the region.
.block.even {} Zebra striping for each block in the region.
.block-title {} The block’s title.

Selectors from some of Drupal 7’s blocks

.block-menu {} All of menu module’s blocks.
.block-menu-block {} All of “Menu block” module’s blocks.
#block-aggregator-category-1 {} Block for the latest news items in the first category.
#block-aggregator-feed-1 {} Block for the latest news items in the first feed.
#block-block-1 {} First custom block created with "Add block" link.
#block-blog-recent {} "Recent blog posts" block.
#block-book-navigation {} "Book navigation" block for the current book's table of contents.
#block-comment-recent {} "Recent comments" block.
#block-forum-active {} "Active forum topics" block.
#block-forum-new {} "New forum topics" block.
#block-locale-language {} Language switcher block.
#block-menu-menu-NAME {} Menu block for the NAME menu.
#block-node-recent {} "Recent content" block.
#block-node-syndicate {} "Syndicate" block for primary RSS feed; see also page.css's .feed-icon.
#block-poll-recent {} "Most recent poll" block.
#block-profile-author-information {} "Author information" block for the profile of the page's author.
#block-search-form {} "Search form" block.
#block-shortcut-shortcuts {} "Shortcuts" block.
#block-statistics-popular {} "Popular content" block.
#block-system-main-menu {} "Main menu" block.
#block-system-management {} "Management" block for Drupal management menu.
#block-system-navigation {} "Navigation" block for Drupal navigation menu.
#block-system-user-menu {} "User menu" block for Drupal user menu.
#block-system-help {} "System help" block.
#block-system-main {} "Main page content" block.
#block-system-powered-by {} "Powered by Drupal" block.
#block-user-login {} "User login form" block.
#block-user-new {} "Who's new" block for a list of the newest users.
#block-user-online {} "Who's online" block for a list of the online users.

Selectors from Drupal 7’s menus

.menu {} A menu tree.
.menu .expanded {} An expanded item in a menu tree.
.menu .collapsed {} A collapsed item in a menu tree.
.menu .leaf {} An item with no children in a menu tree.
.menu a.active {} The active item in a Drupal menu.

Selectors from Zen’s node.tpl.php

.node {} Node wrapper.
.preview .node {} Preview of the content before submitting new or updated content.
.node-title {} Node title.
.node .user-picture {} The picture of the node author.
.node .submitted {} The "posted by" information.
.node .content {} Node's content wrapper.
.node ul.links {} Node links.
.node-promoted {} A node that has been promoted to the front page.
.node-sticky {} A sticky node (displayed before others in a list).
.node-by-viewer {} A node created by the current user.
.node-teaser {} A node displayed as teaser.
.node-unpublished {} Unpublished nodes.

All nodes are given a node-FOO class that describes the type of content that it is. If you create a new content type called "my-custom-type", it will receive a "node-my-custom-type" class.

.node-page {} Page content node.
.node-article {} Article content node.

Selectors from Zen’s comment-wrapper.tpl.php and comment.tpl.php

.comments {} Wrapper for the list of comments and its title.
.comments h2.title {} Heading for the list of comments.
h2.comment-form {} Heading for the comment form.
.comment {} Wrapper for a single comment.
.comment-preview {} Preview of the comment before submitting new or updated comment.
.comment.new {} A new comment since the user last viewed the page.
.comment.first {} The first comment in the list of comments.
.comment.last {} The last comment in the list of comments.
.comment.odd {} An odd-numbered comment in the list of comments.
.comment.even {} An even-numbered comment in the list of comments.
.comment-by-anonymous {} A comment created by an anonymous user.
.comment-by-node-author {} A comment created by the node's author.
.comment-by-viewer {} A comment created by the current user.
.comment-title {} Comment title.
.comment .new {} "New" marker for comments that are new for the current user.
.comment .user-picture {} The picture of the comment author.
.comment .submitted {} The "posted by" information.
.comment .permalink {} Comment's permalink wrapper.
.comment .user-signature {} The user's signature.
.comment .links {} Comment links.
.indented {} Nested comments are indented.
.comment-unpublished {} Unpublished comments.

Selectors from Drupal 7’s forms

.form-item {} Wrapper for a form element (or group of form elements) and its label.
input.error, textarea.error, select.error {} Highlight the form elements that caused a form submission error.
.form-item label {} The label for a form element.
.form-item label.option {} The label for a radio button or checkbox.
.form-item .form-required {} The part of the label that indicates a required field.
.form-item .description {} The descriptive help text (separate from the label).
.form-checkboxes {} Wrapper for a group of checkboxes.
.form-radios {} Wrapper for a group of radios.
.form-submit {} The submit button.
.container-inline div, .container-inline label {} Inline labels and form divs.
.tips {} Tips for Drupal's input formats.
a.button {} Buttons used by contrib modules like Media.
.password-parent {}
.confirm-parent {} Password confirmation.
#block-search-form {} Wrapper for the search form.
#user-login-form {} Drupal's default login form block
.openid-link {} The "Log in using OpenID" link.
.user-link {} The "Cancel OpenID login" link.

Selectors from some of Drupal 7’s fields

The Fences module allows site builders to pick the semantic HTML5 element for each field while editing the field's settings. There's no way a theme can ever know which element to use for the fields on your site, so Zen just lets Drupal core or Fences decide. Since you DO NOT want 3 wrapping divs around every field (do you?), we highly recommend Fences.

   http://drupal.org/project/fences

.field-label {} The optional label for a field.
.field {} Wrapper for any field.

Field types:
.field-type-text {}
.field-type-text-long {}
.field-type-text-with-summary {}
.field-type-image {}
.field-type-file {}
.field-type-taxonomy-term-reference {}
.field-type-number-integer {}
.field-type-number-decimal {}
.field-type-number-float {}
.field-type-list-text {}
.field-type-list-boolean {}
.field-type-list-integer {}
.field-type-list-float {}

.field-name-body {} The default body field.
.field-name-field-image {} The default image field.
.field-name-field-tags {} The default taxonomy tags field.
.field-name-field-FIELDNAME {} Field wrapper class provided by Drupal 7. Underscores in field name are replaced with dashes.
.field-FIELDNAME {} Field wrapper when the Fences module is enabled.