Wikipedia:Catalogue_of_CSS_classes

Wikipedia:Catalogue of CSS classes

Wikipedia:Catalogue of CSS classes

"WP:CLASS" redirects here. For the quality assessment scheme, see WP:ASSESS. For student assignments, see WP:ASSIGN.

The website HTML, generated Wikipedia content and the JavaScripts of Wikipedia define hundreds of classes and IDs. The use of most of them is not clearly explained or described anywhere. Most of these classes and IDs are used for styling using CSS and identify parts of the page that this styling should apply to. They can also be used to make manipulations to the webpages using JavaScript and some have additional semantic meaning and are used by external parties.

Shortcut

This page is an attempt to catalogue and describe the most used and most important classes and IDs used on this wiki.

Before getting started

There are many intricacies about Cascading Style Sheets and JavaScript, too many to discuss all of them here. Some important points however:

  • Classes are defined in the HTML document (generated by the server or by JavaScript). They are used as selectors in CSS.
  • Learn to use the browser inspectors of Firefox, lE, Chrome or Safari to inspect the webpages.
  • By default much of the CSS and JavaScript resources are processed for efficiency. Append ?debug=true or &debug=true to the URL to make them more readable when inspecting.
  • For styling to apply there are two concepts that are important:
    • Load order
      Things defined later have priority and thus override things defined 'earlier'. We will try to give an overview of load order, later on.
    • Specificity
      If load order is failing you when applying your styling, you should know that more complex selectors take priority over order of definition. This is called specificity. It is best practice to keep specificity as low as possible in order to be able to override contextually with lil code.[clarification needed]
  • Using !important is generally bad. Use different forms of specificity instead.

CSS is complex. Follow the links above and the other links throughout this article to learn more. If you do not understand how Cascading Style Sheets and JavaScript work and what symbols to use, please begin with Wikipedia's own articles about CSS and JavaScript, which contain a list of references and external links to relevant material.

Stylesheets and JavaScript

Note: try searching through git for the core skin CSS/JS (eg. Go to /skins/Vector/ and /skins/MonoBook/ and /core.git/resources/src/mediawiki.skinningfor the current default/global sets).

The following table is really outdated since MediaWiki 1.17 (June 2011). The complexity of MediaWiki itself has increased significantly and many of the locations of the styling rules have been split out and are only collected and bundled when delivered to the browser.

One way to inspect the core CSS and JS files is to inspect a page with Web development tools while loading any Wikipedia page with ?debug=true URL parameter (this will separate different CSS files, prevent minification and preserve comments). Another way is to look at these skin files (example of Vector in Git); note that most MediaWiki core JS files are to be found in /resources/src directory.

More information Skin, Type ...
Notes
  1. [J 1]
    Only available to logged-in users.
  2. [J 2]
    Can be disabled via preferences.

Page/action specific

Several types of MediaWiki pages, actions, and preferences load conditional stylesheets and javascript, to reduce the burden of unnecessary script loading.

More information Script or style, Page or action ...

User group specific

Special stylesheets and JavaScript are loaded for some user groups.

More information Script or style, Description ...

Classes

We often add the name of a template or MediaWiki message itself as a class name in the code of the template or message. This allows users to style the message, and it allows future skinning of the message in the global CSS files. Please do not document such class names here, unless they are actually used in some CSS or JavaScript file, since there are (or at least should be) literally thousands of such class names.

More information class, description ...

Classes not used in style sheets

Wikipedia also uses a number of classes with functions unrelated to style sheets.

IDs

Shortcut
More information id, Description ...

ca-X, f-X, n-X, p-X, pt-X, t-X, wpX IDs

i.e. interface buttons, links, etc.

"ca-" in the class names stands for "content actions", "f-" for footer, "n-" for navigation, "p-" for "page", "pt-" for "personal tools" (at the top), and "t-" for "tools" (in the side bar).

More information id, Description ...

JavaScript variables

About 30 variables that can be used in JavaScript. View the rendered code of any page and find for instance var wgUserName.

"wgAction":"view"
"wgArticleId":3941451
"wgBreakFrames":false
"wgCanonicalNamespace":"Project"
"wgCanonicalSpecialPageName":false
"wgCategories":["Wikipedia features"]
"wgCSPNonce":false
"wgCurRevisionId":1077279639
"wgDefaultDateFormat":"dmy"
"wgDigitTransformTable":["",""]
"wgDiscussionToolsFallbackEditMode":"source"
"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":false,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false}
"wgEchoSeenTime":{"alert":"2022-03-15T22:46:57Z","notice":"1970-01-01T00:00:01Z"}};
"wgEditSubmitButtonLabelPublish":true
"wgFlaggedRevsParams":{"tags":{"status":{"levels":-1}}}
"wgGEAskQuestionEnabled":false
"wgGELinkRecommendationsFrontendEnabled":false
"wgGENewcomerTasksGuidanceEnabled":true
"wgGlobalGroups":[]
"wgIsArticle":true
"wgIsProbablyEditable":true
"wgIsRedirect":false
"wgMediaViewerEnabledByDefault":true
"wgMediaViewerOnClick":true
"wgMFDisplayWikibaseDescriptions":{"search":true,"nearby":true,"watchlist":true,"tagline":false}
"wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"]
"wgNamespaceNumber":4
"wgNoticeProject":"wikipedia"
"wgNoticeUserData":{"registration":"999"}
"wgPageContentLanguage":"en"
"wgPageContentModel":"wikitext"
"wgPageName":"Wikipedia:Catalogue_of_CSS_classes"
"wgPopupsFlags":10
"wgRelevantArticleId":3941451
"wgRelevantPageIsProbablyEditable":true
"wgRelevantPageName":"Wikipedia:Catalogue_of_CSS_classes"
"wgRequestId":"791d32fc-0adb-4cb1-9a8c-db11247504d9"
"wgRestrictionEdit":[]
"wgRestrictionMove":[]
"wgRevisionId":1077279639
"wgSeparatorTransformTable":["",""]
"wgTitle":"Catalogue of CSS classes"
"wgULSAcceptLanguageList":["nl","en-us","en"]
"wgULSBabelLanguages":["nl","en"]
"wgULSCurrentAutonym":"English"
"wgULSisCompactLinksEnabled":false
"wgULSPosition":"interlanguage"
"wgUserEditCount":1288
"wgUserGroups":["extendedconfirmed","*","user","autoconfirmed"]
"wgUserId":1590755
"wgUserName":"xxx"
"wgUserRegistration":999
"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"}
"wgWikibaseItemId":"Q21188652"
"wgWMEPageLength":60000
"wgWMESchemaEditAttemptStepOversample":false
RLPAGEMODULES=["ext.cite.ux-enhancements","site","mediawiki.page.ready","jquery.tablesorter","jquery.makeCollapsible","mediawiki.toc","skins.monobook.scripts","mediawiki.page.watch.ajax","ext.gadget.ReferenceTooltips","ext.gadget.formWizard","ext.gadget.geonotice","ext.gadget.watchlist-notice","ext.gadget.charinsert","ext.gadget.extra-toolbar-buttons","ext.gadget.switcher","mmv.head","mmv.bootstrap.autostart","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.cx.eventlogging.campaigns","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.centralauth.centralautologin.clearcookie","ext.discussionTools.init","ext.uls.interface"];
RLSTATE={"ext.gadget.WatchlistBase":"ready","ext.gadget.WatchlistGreenIndicatorsMono":"ready","ext.gadget.SubtleUpdatemarker":"ready","ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"loading","user.options":"loading","ext.cite.styles":"ready","ext.discussionTools.init.styles":"ready","skins.monobook.styles":"ready","jquery.tablesorter.styles":"ready","jquery.makeCollapsible.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.echo.styles.badge":"ready","oojs-ui.styles.icons-alerts":"ready","ext.wikimediaBadges":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready"};

See also

Notes

  1. [1]
    In some special cases in JavaScript.
Share this article:

This article uses material from the Wikipedia article Wikipedia:Catalogue_of_CSS_classes, and is written by contributors. Text is available under a CC BY-SA 4.0 International License; additional terms may apply. Images, videos and audio are available under their respective licenses.