Contents

Wikipedia:Catalogue of CSS classes

Many links to CSS files on this page are dead, therefore its contents should not be trusted until it is thoroughly checked and rewritten.

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.

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

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, ChromeorSafari to inspect the webpages.
• By default much of the CSS and JavaScript resources are processed for efficiency. Append ?debug=trueor&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.

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.

Notes

Page/action specific[edit]

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

User group specific[edit]

Special stylesheets and JavaScript are loaded for some user groups.

Parts of this Wikipedia page (those related to section) need to be updated. Please help update this Wikipedia page to reflect recent events or newly available information. Relevant discussion may be found on the talk page. (July 2022)

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.

Classes not used in style sheets[edit]

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

• Microformat classes as listed in Microformat classes.
• noviewer, which causes Media Viewer to disregard contents
• robots-nocontent, which causes Yahoo!'s crawler to disregard contents per [3]
• nopopupnotice, prevents EditNoticesOnMobile (and in the future possibly the apps) from automatically popping up an edit notice. See also phab:T312999.

ca-X, f-X, n-X, p-X, pt-X, t-X, wpX IDs[edit]

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).

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"};

• All pages with titles beginning with Wikipedia:Catalogue of CSS classes
• Wikipedia:WikiProject User scripts
• Wikipedia:Useful styles
• Help:User style
• Help:Cascading style sheets