View source for Manual:Interface/IDs and classes

<languages/>
This is a list of '''IDs and classes''' provided by MediaWiki core or a [[Bundled extensions and skins|bundled]] extension/skin.
<translate><!--T:31--> This are commonly used by extensions and gadget developers alike.</translate>
When in doubt, consider checking with [https://codesearch.wmcloud.org/ Codesearch] and [https://global-search.toolforge.org/ Global Search] to empirically understand usage.
<translate><!--T:14--> For a more extended collection of historically grown list of IDs and classes, visit [[w:Wikipedia:Catalogue of CSS classes|Wikipedia's Catalogue of CSS classes]].</translate>

<translate>
== Main selectors == <!--T:15-->
</translate>

{| class="wikitable sortable"
! <translate><!--T:1--> Selector</translate>
! <translate><!--T:3--> Description</translate>
! <translate><!--T:32--> Component or owner</translate>
|- id="class-client-nojs"
| <code>.client-nojs</code>
| Set for the entire HTML document. This indicates the browser has not successfully loaded our [[Compatibility#Browsers|Grade A JavaScript layer]] (yet). <translate><!--T:33--> For example, if the device is too old, or if the browser blocked JS, or if the user disabled it. This is automatically switched to <tvar name=1><code>.client-js</code>.</tvar> at run-time.</translate>
| [[ResourceLoader]]
|- id="class-client-js"
| <code>.client-js</code>
| Set for the entire HTML document. Indicates the browser has or will successfully load our [[Compatibility#Browsers|Grade A JavaScript layer]]. <translate><!--T:34--> This is automatically switched from <tvar name=1><code>.client-nojs</code></tvar>.</translate>
| [[ResourceLoader]]
|- id="class-comment"
| <code>.comment</code>
| <translate><!--T:35--> Set on text that is a comment (also known as edit summary or log reason), which appear in places such as page history, logs, and recent changes.</translate>
| MediaWiki core
|- id="class-diff"
| <code>.diff</code>
| <translate><!--T:36--> Set on the element containing the difference comparison between revisions and the action links for those revisions.</translate>
| MediaWiki core
|- id="class-editsection"
| <code>.mw-editsection</code>
| Set on the parent element containing the edit section link in section headings when viewing content. Added in MW 1.22 ([[gerrit:c/mediawiki/core/+/49364/|change 49364]]).
| 
|- id="class-mw-first-heading"
| <code>.mw-first-heading</code>
| <translate><!--T:23--> The page title.</translate> Added in MW 1.38 (for versions before, use <code>[[#class-firstHeading|.firstHeading]]</code>).
| All skins
|- id="class-mediawiki"
| <code>.mediawiki</code>
| Set for the entire HTML document. This indicates the page was served through a MediaWiki skin. Commonly used to decide whether a style should not (or should only) apply to action=render and other external rendering contexts, e.g. in TemplateStyles or site styles.
| MediaWiki core
|- id="class-mw-body-content"
| <code>.mw-body-content</code>
| <translate><!--T:37--> Holds the content of the wiki page, or interface of the page action or special page.</translate>
| All skins
|- id="class-mw-parser-output"
| <code>.mw-parser-output</code>
| See [[phab:T37247]], [[phab:T164792]], [[gerrit:352711]].
| MediaWiki core
|- id="class-mw-content-ltr"
| <code>.mw-content-ltr</code>
| Added on the same div as <code>[[#id-mw-content-text|#mw-content-text]] [[#class-mw-parser-output|.mw-parser-output]]</code>, except when there is no such element (on special pages and file pages, or when not viewing the page (e.g. history) or if the page doesn't exist). More info: [[directionality support]]. Added in MW 1.18. {{warning|1=Do not use this to get the content! (e.g. in JavaScript)}}
| 
|- id="class-mw-content-rtl"
| <code>.mw-content-rtl</code>
| See [[#class-mw-content-ltr|.mw-content-ltr]]. Added in MW 1.18.
| 
|- id="id-mw-content-text"
| <code>#mw-content-text</code>
| Holds everything between the page title and contentSub on the one hand, and ArticleFeedback and categories on the other hand. Present on each page view (includes history view, non-existing pages, print view, ...). Known issue: May contain unrelated elements ([[bugzilla:35247|bug 35247]]). Added in MW 1.19 ({{r|111647}}).
| 
|- id="p-"
| <code>#p-logo, #p-personal, #p-views, etc</code>
| identifiers for "Portlets" the skin may arrange in its navigation or sidebar. Useful for e.g. <code>[[ResourceLoader/Modules#addPortletLink|addPortletLink()]]</code>
| {{int|skinname-monobook}}, {{int|skinname-vector}}, {{int|skinname-modern}}
|- id="class-page-"
| <code>.page-</code>
| Each page has a class on the body with the name of the page encoded after a <code>page-</code> prefix.
| 
|- id="id-pagehistory"
| <code>#pagehistory</code>
| <translate><!--T:27--> List of revisions when viewing <tvar name=1>action=history</tvar></translate>
| 
|- id="class-pcs-theme-"
| <code>.pcs-theme-default, .pcs-theme-dark, .pcs-theme-sepia, .pcs-theme-black</code>
| Used on the body element by the mobile app and page content service to select different color themes of the content.
| 
|- id="class-plainlinks"
| <code>.plainlinks</code>
| <translate><!--T:28--> See <tvar name=1>{{ll|Manual:Plainlinks}}</tvar></translate>
| 
|- id="id-searchbox"
| <code>#searchbox</code>
| <translate><!--T:29--> Used by Inputbox</translate>
| 
|- id="class-skin-"
| <code>.skin-skinname</code>
| The skin used is declared on the body, with the skin selector. This selector is <code>skin-</code> postfixed by the name of the skin. Use <code>skin-vector-2022</code> for new vector, <code>skin-vector</code> applies to both legacy and 2022.
| All skins.
|- id="class-skin--responsive"
| <code>.skin--responsive</code><!-- not a typo: two hyphens -->
| This class is added to the body when the responsive user preference option is on. Added in MW 1.37. See [[phab:T258290]].
| MediaWiki core, 1.37 and above.
|- id="class-sitedir-ltr"
| <code>.sitedir-ltr</code>
| When the wiki [[content language]] direction is left-to-right. Added in MW 1.18 ({{r|91518}}).
| 
|- id="class-sitedir-rtl
| <code>.sitedir-rtl</code>
| When the wiki [[content language]] direction is right-to-left. Added in MW 1.18 ({{r|91518}}).
| 
|}
<translate>

== Content == <!--T:25-->
</translate>

{| class="wikitable sortable"
! <translate><!--T:9--> Selector</translate>
! <translate><!--T:10--> Skin(s)</translate>
! <translate><!--T:11--> Description</translate>
! <translate><!--T:12--> Availability</translate>
|- id="class-noprint"
| <code>.noprint</code>
| 
| MediaWiki core class available for action=print in most skins since at least [[MediaWiki 1.14]].
|
|- id="class-nomobile"
| <code>.nomobile</code>
| 
| 
|
|- id="class-noexcerpt"
| <code>.noexcerpt</code>
| 
| <translate><!--T:30--> Used by <tvar name=1>{{ll|Extension:TextExtracts}}</tvar> to force it to be removed from consideration from text extracts.</translate>
|
|- id="class-notpageimage"
| <code>.notpageimage</code>
| 
| Used by [[Extension:PageImages]] to exclude images from the algorithm that selects the image used to represent the page.
|
|- id="class-licensetpl"
| <code>.licensetpl</code>
| 
| A series of licensetpl*, fileinfotpl*, creator and other classes. See [[commons:Commons:Machine-readable data]].
| See [[Extension:CommonsMetadata]]
|- id="class-metadata"
| <code>.metadata</code>
| 
| See [[Help:Extension:Media Viewer#How can I disable Media Viewer for unrelated images?]] and [[Reading/Multimedia/Media Viewer/Template compatibility#Marking up article templates as ignored]].
|
|- id="class-noviewer"
| <code>.noviewer</code>
| 
| See [[Help:Extension:Media Viewer#How can I disable Media Viewer for unrelated images?]]
|
|- id="class-noresize"
| <code>.noresize</code>
| {{int|skinname-minerva}}
| Used by [[Extension:MobileFrontend|MobileFrontend]] and Minerva to apply responsive sizing. As this can break some images and elements with absolute positioning (for overlays for instance), you can wrap images in an element with the class noresize to opt out from responsive sizing.
|
|- id="class-navigation-not-searchable"
| <code>.navigation-not-searchable</code>
| 
| See [[Help:CirrusSearch#Exclude content from the search index]].
|
|- id="class-searchaux"
| <code>.searchaux</code>
| 
| See [[Help:CirrusSearch#Exclude content from the search index]].
|
|- id="class-searchaux"
| <code>.tmbox, .ambox, #coordinates, .navbox, .vertical-navbox, .topicon</code>
| {{int|skinname-minerva}}
| Undocumented, with [[Extension:MobileFrontend|MobileFrontend]] they assume the special meaning of being "secondary content". See [[Mobile Gateway/Mobile homepage formatting]], [[Reading/Web/Projects/Performance/Removal of secondary content in production|discussion]], {{git file|project=mediawiki/extensions/MobileFrontend|file=resources/skins.minerva.content.styles/hacks.less}}.
|
|- id="class-infobox"
| <code>.infobox</code>
|
| [[Extension:MobileFrontend|MobileFrontend]] and the mobile apps assume this is an [[:en:w:Help:Infobox|infobox]] and will move it to after the lead of the article when they see fit. As well as applying dedicated styling for this often crucial element of Wikipedia articles. 
|
|- id="class-mw-collapsible"
| <code>.mw-collapsible, mw-collapsed, mw-collapsible-content</code>
|
| {{ll|Manual:Collapsible elements}} can collapse elements that are decorated with this class.
|
|- id="class-wikitable"
| <code>.wikitable</code>
|
| Use this class on tables to create a styled table
|
|- id="class-sortable"
| <code>.sortable, .unsortable</code>
|
| Use on tables to load JavaScript to make the table {{ll|Help:sorting|sortable}}.
|
|- id="class-notheme"
| <code>.notheme</code>
| iOS and Android app
| Used to opt out content from the dark, black and sepia theming, which can be applied by the iOS and Android application which in turn makes use of the Page Content Service
|
|}

<translate>

== Deprecated == <!--T:26-->
</translate>

{| class="wikitable sortable"
! <translate><!--T:5--> Selector</translate>
! <translate><!--T:7--> Description</translate>
! <translate><!--T:6--> Skin(s)</translate>
|- id="class-ltr"
| <code>.ltr</code>
| {{deprecated-inline}} When the user language is left-to-right (LTR). Before that, when the content language was LTR. See also [[#class-rtl|.rtl]].
|
|- id="class-rtl"
| <code>.rtl</code>
| {{deprecated-inline}} When the user language is right-to-left (RTL). Before that, when the content language was RTL. See also [[#class-ltr|.ltr]].
|
|- id="id-bodyContent"
| <code>#bodyContent</code>
| {{deprecated-inline}} Use <code>[[#id-mw-content-text|#mw-content-text]]</code> instead. Or better, use the more specific <code>[[#id-mw-content-text|#mw-content-text]] [[#class-mw-parser-output|.mw-parser-output]]</code> if applicable.
| All skins (except the obsolete {{int|skinname-modern}} and {{int|skinname-cologneblue}})
|- id="id-firstHeading"
| <code>#firstHeading</code>
| {{Deprecated-inline}} Use <code>[[#class-mw-first-heading|.mw-first-heading]]</code> instead.
| All skins
|- id="class-firstHeading"
| <code>.firstHeading</code>
| {{Deprecated-inline}} Use <code>[[#class-mw-first-heading|.mw-first-heading]]</code> instead.
| All skins
|-
|<code>.editsection</code>
| <translate><!--T:38--> Set on the parent element containing the edit section link in section headings when viewing content.</translate> Replaced in MW 1.22 with <code>.mw-editsection</code> in [[gerrit:c/mediawiki/core/+/49364/|change 49364]].
|
|-
| <code>.warningbox</code>, <code>.errorbox</code>, <code>.successbox</code>
| {{deprecated-inline}} Used by MediaWiki as the default container on some system messages (like the diff box).
| 
|}