SharePoint 2010 CSS Reference Chart

The following CSS Reference Chart highlights the major styles used in SharePoint
Foundation 2010 and SharePoint Server 2010. CSS styles are grouped by area of
the page and include the class/ID value, an explanation of how it is used in
SharePoint and other related information including a screenshot where
appropriate. Code (and file location) for the style statement is included.

Many styles are dependent on parent selectors and may not apply to your custom master page.

Code listed for each entry does NOT include statements when the class/ID is a parent in descendent or child selector style
statements.

OOTB stands for "out of the box". This is what SharePoint comes with by default.

General Purpose

.v4master

Applied to BODY; forces the page size to the full width and height of the browser and hides the scroll bar for most browsers ("scroll" attribute on "body" handles this for some versions of IE); used in many descendant selectors.

Modal dialog window auto size generation depends on these properties (height and width set to 100% and overflow set to hidden) to properly display modal dialog windows without extra scrollbars.

Aids in docking the Ribbon at the top of the web page (Ribbon won't scroll with page).

Width and height functionality can be duplicated in custom master pages by the including the height, width and overflow properties (see source code) in BODY properties of the custom master page. Note that any descendent selectors dependent on "v4master" will not work if this method is used.

Used in several locations to hide elements from view; sometimes unnecessarily added to elements wrapping hidden content placeholders. Used extensively with SharePoint:UIVersionedContent controls in master pages.

Sets the float and padding for the element. Used in assorted locations.

Assuming 'rp' stands for 'right padding'. Default usage of this style floats the element and creates padding to the right of the element. Note that the statement does not include a width value, which is required for valid CSS. If other styles are applied to the element that includes a width, then everything is combined and it will be valid. Otherwise you will need to specify a width when using this class.

In the master page, add this class to the #s4-workspace DIV element when creating a fixed width design or includes a right/left margin for the entire web page; prevents other SharePoint code from setting widths.

Not added to the DIV element by default! This has to be added to custom master pages if needed.

#s4-bodyContainer

Applied to DIV element that wraps the vast majority of the page content; child of the 's4-workspace' DIV element.

This ID is mandatory for the EMCAScript logic (docked Ribbon), modal dialog box sizing and scripts that calculate page width.

Applied to SPAN that is a child of the 'ms-siteactionsmenu' SPAN that wraps the Site Actions menu anchor.

The 'ms-siteactionsmenuinner' class is used in a descendant selector as a child of the 'v4master' class that sets the border color and background color to transparent; if the 'v4master' class is not set on the BODY element, then a custom style statement will need to be created to duplicate this style.

Applied to SPAN element that wraps the anchor, which is the user's name. Child of the 's4-trc-container-menu' DIV element. Applied in conjunction with the 'ms-SpLinkButtonInActive' and 'ms-welcomeMenu' classes.

Applied to SPAN element that wraps the ANCHOR element, which is the user's name; child of the 's4-trc-container-menu' DIV element. Applied in conjunction with the 'ms-SPLink' and 'ms-welcomeMenu' classes.

Applied to SPAN element that wraps the ANCHOR element, which is the user's name; child of the 's4-trc-container-menu' DIV element. Applied in conjunction with the 'ms-SPLink' and 'ms-welcomeMenu' classes.

Applied to SPAN element that wraps the anchor, which is the user's name; child of the 's4-trc-container-menu' DIV element. Applied in conjunction with the 'ms-SPLink' and 'ms-SpLinkButtonInActive' classes.

Applied to ANCHOR element that wraps the text linking to the parent page/list. Class also applied to parent unordered list (UL).

Styles are shared with 's4-breadcrumbCurrentNode'.

Note the style statements listed use 's4-breadcrumbRootNode' as a parent in a descendant selector for the hyperlink element. 's4-breadcrumbRootNode' is not directly used for the hyperlink (such as 'a.s4-breadcrumbRootNode').

Title Area

#s4-titlerow

Applied to DIV that wraps the title area; child of the 's4-bodyContainer' DIV element within the workspace. Referenced in a script file that calculates and fixes the Ribbon dimensions. Applied in conjunction with several classes (refer to following entries). Included in master page.

Nested Styles for Title Area Container

.s4-titlerowhidetitle

Applied to DIV that wraps the title area; child of the 's4-bodyContainer' DIV element within the workspace. Used by the Ribbon positioning system to convey current Ribbon state; 's4-titlerowhidetitle' is the default and is changed when the ECMAScript code initializes. Applied in conjunction with the following classes: 's4-pr', s4-notdlg', 'ms-titlerowborder'. Included in master page.

.ms-titlerowborder

Applied to DIV that wraps the title area; child of the 's4-bodyContainer' DIV element within the workspace. Dynamically added when the page is generated; is not included in the master page; applied in conjunction with the following classes: 's4-pr', s4-notdlg', 's4-titlerowhidetitle'.

Applied to DIV that wraps the title area content; child of the 's4-titlerow' DIV element; applied in conjunction with the 's4-lp' class. Also used as a parent in descendent selectors. Included in master page.

Applied to TD that contains the site title text; child of the 's4-titletable' TABLE element. Also used as parent for descendant selector style statements for other title types. Included in master page.

This class is the parent however the style properties for the site title text is controlled in the 's4-title h1' and 's4-title h2' classes.

Nested styles for Breadcrumb Separator Arrow

.s4-bcsep

Applied to SPAN element that wraps site/page title breadcrumb separator arrow image; child of the 's4-titletext' TD element. Applied in conjunction with the 's4-nothome' and 's4-titlesep' classes. Included in master page.

This chart does not typically reference nightandday.css since it is custom master page specific; however, nightandday.css is the only file this statement appears.

Applied to SPAN element that wraps site/page title breadcrumb separator arrow image; child of the 's4-titletext' TD element. Applied in conjunction with the 's4-nothome' and 's4-bcsep' classes. Included in master page.

Applied to SPAN element that wraps site/page title breadcrumb separator arrow image; child of the 's4-titletext' TD element. Applied in conjunction with the 's4-titlesep' and 's4-bcsep' classes. Included in master page.

Unknown usage. Could not locate in any CSS or JS file.

SPAN with inline styles

Applied to SPAN element that wraps separator arrow IMG element; child of a SPAN element (no class or ID) that is a child of the 's4-titlesep' SPAN element.

Applied to DIV element that contains the page description text; child of the 's4-pagedescription' DIV element; only rendered when description text exists for a page.

This class is only referenced in Core.css, which is used for SharePoint 2007 sites. However it can be used in custom CSS style statements to target the description text and apply modifications to the text or the container.

Social Data

.s4-socialdata-notif

Applied to TD element that wraps social data icons/links; child of the 's4-titletable' TABLE element. Included in master page.

Top Navigation Bar (Global Navigation)

Container Styles for Top Nav

#s4-topheader2

Applied to DIV element that wraps the top navigation bar; child of the 's4-titlerow' DIV element within the workspace. This DIV element also contains search and help icon. Applied in conjunction with the 's4-pr' and 's4-notdlg' CSS classes. Included in master page.

Applied to DIV element that contains the DIV that contains the top navigation bar; child of the 's4-topheader2' DIV element. Applied in conjunction with the 's4-lp' class. Included in master page. Also used as a parent in descendent selector style statements.

Applied to DIV element that contains the top navigation bar; child of the 's4-toplinks' DIV element. Specified as the CssClass for the TopNavigationMenuV4 SharePoint AspMenu code in the master page. Also used as a parent in descendent selector style statements.

It is assumed that the "tn" in the class name refers to "top nav". There is another style that uses "sn" (side nav). It is helpful to remember this when working with the descendent and child selector style statements that use 's4-tn' and 's4-sn'.

Applied to DIV element that wraps the generated menu; child of the 's4-tn' DIV element. Applied in conjunction with the 'horizontal' and 'menu-horizontal' classes. Also used as a parent selector in descendent selector style statements in Corev4.css.

HTML element with CSS class is generated by AspMenu; be careful when editing styles, this is shared with the Quick Launch (Current Navigation).

Applied to DIV element that wraps the generated menu; child of the 's4-tn' DIV element. Applied in conjunction with the 'menu' and 'menu-horizontal' classes.

Unknown usage. Could not locate in any CSS or JS file.

.menu-horizontal

Applied to DIV element that wraps the generated menu; child of the 's4-tn' DIV element. Applied in conjunction with the 'menu' and 'horizontal' classes. Also used heavily as a parent in descendent selector style statements.

Applied to generated navigation UL element; child of the 'menu-horizontal' DIV element. Applied in conjunction with the 'root' class.

Also applied to generated nested navigation UL element for instances where there is a second tier of navigation items (subsites, pages or custom links). In this case the UL is a child of the 'static' LI element.

Be careful creating custom styles as this same class name is applied to the LI element and wrapping ANCHOR element; styles are also shared with Quick Launch (Current Navigation).

The style properties listed is combined with 'a.static'; be careful when creating custom styles as this same class name is applied to the UL element and wrapping anchor; styles are also shared with Quick Launch (Current Navigation).

Applied to generated LI element that contains a navigation item that has a dynamic (drop-down/fly-out) menu with children navigation items. In OOTB SharePoint, no style statements exist that use this class name AND the LI element in the selector.

Be careful creating custom styles as this same class name is applied to the wrapping ANCHOR element; styles are shared with Quick Launch (Current Navigation).

li.selected

Applied to generated LI element that contains a navigation item that is the currently selected navigation item. In OOTB SharePoint, no style statements exist that use this class name AND the LI element in the selector.

Be careful creating custom styles as this same class name is applied to the wrapping ANCHOR element; styles are shared with Quick Launch (Current Navigation).

.s4-tn li.static > a:hover

Hover state for all ANCHOR elements that wrap a navigation item.

a.static

Applied to generated ANCHOR element that wraps the navigation item; nested in the LI element. Applied in conjunction with the 'menu-item' class.

The style properties listed is combined with 'li.static'; be careful when creating custom styles as this same class name is applied to the UL element and LI element; styles are also shared with Quick Launch (Current Navigation).

Applied to generated ANCHOR element that wraps the navigation item that has a dynamic (drop-down/fly-out) menu with children navigation items. Applied in conjunction with 'static' and 'menu-item' classes. Only used as a parent in descendant selector style statements.

Be careful creating custom styles as this same class name is applied to the LI element; styles are also shared with Quick Launch (Current Navigation).

a.selected

Applied to generated ANCHOR element that wraps the navigation item that is the currently selected navigation item.

Be careful creating custom styles as this same class name is applied to the LI element; styles are also shared with Quick Launch (Current Navigation).

Applied to generated SPAN element that wraps the navigation item text container; child of the 'menu-item' ANCHOR element. Sets the drop down arrow image(s) for dynamic menus. Also used as a parent in child selector style statements.

Some of the style properties listed is combined with 'menu-item-text' class; styles are also shared with Quick Launch (Current Navigation).

Unordered List Styles for Dynamic (drop-down/fly-out) Menu

ul.dynamic

Applied to the generated UL element for a dynamic (drop-down/fly-out) menu with children navigation items; child of the 'dynamic-children' LI element. Also used as a parent in descendant selector style statements.

Be careful creating custom styles as this same class name is applied to the LI element and ANCHOR element; styles are also shared with Quick Launch (Current Navigation).

Applied to DIV element that wraps the search area; child of the 's4-topheader2' DIV element. Applied in conjunction with the 's4-searcharea' ID and 's4-rp' CSS class. Also used as a parent in several descendant selector style statements. Included in master page.

Also applied to a nested TABLE element that contains search components; child of the #SRSB DIV element. Applied in conjunction with 'ms-sbtable' and 'ms-sbtable-ex' CSS classes. This instance is not included in the master page.

Be careful when creating custom styles as this same class name is applied to the TABLE element.

Applied to TABLE element that contains the search components. This table is nested in a DIV element (no ID or class) that is a child of the 'SRSB' DIV element. Applied in conjunction with the 'ms-sbtable-ex' and 's4-search' classes.

Applied to TABLE element that contains the search components. This table is nested in a DIV element (no ID or class) that is a child of the 'SRSB' DIV element. Applied in conjunction with the 'ms-sbtable' and 's4-search' classes.

Applied to TABLE element that contains the search components. This table is nested in a DIV element (no ID or class) that is a child of the 'SRSB' DIV element. Applied in conjunction with the 'ms-sbtable' and 'ms-sbtable-ex' classes.

Be careful when creating custom styles as this same class name is applied to a parent DIV element.

Applied to table row (TR) element that contains table cells for search term input field and Go button; child of the 'ms-sbtable' TABLE element. Also nested in a TBODY element. In OOTB SharePoint, no style statements exist that use this class name.

.ms-sbcell

Applied to table cell (TD) elements except the last table cell; child of the 'ms-sbrow' TR element. Also used as a parent in descendent selector style statements.

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 'pageStatusBar' ID. Included in master page. One of four status bar message styles.

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 'pageStatusBar' ID. Included in master page. One of four status bar message styles.

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 'pageStatusBar' ID. Included in master page. One of four status bar message styles.

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 'pageStatusBar' ID. Included in master page. One of four status bar message styles.

Applied to SPAN element that wraps all status bar text; child of the 'pageStatusBar' DIV element. In OOTB SharePoint, no style statements exist that use any of this ID name.

.status_1_body

Applied to SPAN element that wraps the dynamically generated status text; child of the 'status_1' SPAN element. In OOTB SharePoint, no style statements exist that use any of this class name.

Web Part Add Pane

#WebPartAdderUpdatePanelContainer

Applied to DIV element that wraps the Web Part Adder pane; child of the 's4-ribbonrow' class. Included in the master page.

.ms-wpadder

Applied to TABLE element that contains Web Part Adder pane components; child of a DIV element that is a child of the 'WebPartAdderUpdatePanelContainer' DIV element. Applied in conjunction with the 'ms-rtefocus-invalid' class - which is only referenced in OOTB SharePoint JavaScript files.

Applied to IFRAME element that contains the dialog box contents under the title bar area; child of the 'ms-dlgFrameContainer' DIV element. iFrame also has inline styles applied for width and height that will change based on current screen.

Applied to HTML element that is the start of the dialog box contents within the iFrame; child of the 'ms-dlgFrame' IFRAME element. Only used as a parent selector in descendent selector style statements.

This is a great class to use to target components when in the dialog box view. Essentially a copy of the web page code is repeated in the dialog box iFrame. Use this class to target components that are needed elsewhere in the site. For example, hide a custom navigation system or change the display of text.

.ms-dlgOverlay

Applied to DIV element that creates browser window shading under the dialog box window. DIV also has inline styles applied for width, height, display and z-index that will change based on current screen.

Content Area

#s4-mainarea

Applied to DIV element that contains the lower content area components including left navigation and right side content; child of the 's4-bodyContainer' DIV element. Applied in conjunction with the 's4-pr' and 's4-widecontentarea' classes. Included in the master page.

Applied to DIV element that contains the lower content area components including left navigation and right side content; child of the 's4-bodyContainer' DIV element. Applied in conjunction with the 's4-pr' class and 's4-mainarea' ID. Included in the master page.

Applied to DIV element that contains the left panel components; child of the 's4-leftpanel' DIV element. Included in the master page.

#MSO_ContentTable

Applied to DIV element that wraps the content area; child of the 's4-mainarea' DIV element. Applied in conjunction with the 's4-ca' and 's4-ca-dlgNoRibbon' classes. Referenced in many script files. Included in the master page.

Applied to DIV element that wraps the content area; child of the 's4-mainarea' DIV element. Applied in conjunction with the 'MSO_ContentTable' ID and 's4-ca-dlgNoRibbon' class. Included in the master page.

Applied to DIV element that contains the main content placeholder (PlaceHolderMain); child of the 'ms-bodyareacell' DIV element. Required in order to render the Web Part Tool Pane. Included in the master page.

.ms-descriptiontext

General usage description text; various instances are controlled with descendant selectors.

Applied to DIV element that wraps the Quick Launch; child of the 'ms-quickLaunch' DIV element. Only used in an adjacent sibling selector style statement. Included in the master page. Set as the value for CssClass property in the QuickLaunchNavigationManager SharePoint Navigation Manager.

Applied to a DIV element that wraps the Quick Launch; child of a DIV (no ID or class) that is the child of the 'ms-quicklaunch-navmgr' DIV element. Included in the master page and set as the value for the CssClass property in V4QuickLaunchMenu SharePoint AspMenu. Also used as a parent in descendant selector style statements.

Applied to DIV element that wraps the generated menu; child of the 's4-ql' DIV element. Applied in conjunction with the 'vertical' and 'menu-vertical' classes. Also used as a parent selector in descendent selector style statements in Corev4.css.

HTML element with CSS class is generated by AspMenu; be careful when editing styles, this is shared with Top Navigation Bar (Global Navigation).

Applied to DIV element that wraps the generated menu; child of the 's4-ql' DIV element. Applied in conjunction with the 'menu' and 'menu-vertical' classes. Only used as a parent in descendent selector style statements.

.menu-vertical

Applied to DIV element that wraps the generated menu; child of the 's4-ql' DIV element. Applied in conjunction with the 'menu' and 'vertical' classes. Only used as a parent in descendent selector style statements.

Applied to generated navigation UL element; child of the 'menu-vertical' DIV element. Applied in conjunction with the 'root' class.

Also applied to generated nested navigation UL element for instances where there is a second tier of navigation items (lists, libraries, wiki pages or custom links). In this case the UL is a child of the 'static' LI element.

HTML element with CSS class is generated by AspMenu; OOTB, this is not used for Quick Launch, but is used for the top horizontal menu

Applied to generated LI element that contains a navigation item. OOTB no style statements are present that affect the Quick Launch.

The style properties listed is combined with 'a.static'; be careful when creating custom styles as this same class name is applied to the UL element and wrapping anchor; styles are also shared with Top Navigation Bar (Global Navigation).

Applied to generated LI element that contains a navigation item that is the currently selected navigation item (generally seen in Publishing site sub nav). In OOTB SharePoint, no style statements exist that use this class name AND the LI element in the selector.

Be careful creating custom styles as this same class name is applied to the wrapping ANCHOR element; styles are shared with Top Navigation Bar (Global Navigation).

Applied to generated ANCHOR element that wraps the navigation item; nested in the LI element. Applied in conjunction with the 'menu-item' class.

The style properties listed is combined with 'li.static'; be careful when creating custom styles as this same class name is applied to the UL element and LI element; styles are also shared with Top Navigation Bar (Global Navigation).

Applied to generated SPAN element that wraps the navigation item text container; child of the 'menu-item' ANCHOR element. Sets the fly-out arrow image(s) for dynamic menus when present. Also used as a parent in child selector style statements.

Some of the style properties listed is combined with 'menu-item-text' class; styles are also shared with Top Navigation Bar (Global Navigation).

If the code has been edited and the Quick Launch generates drop-down/fly-out menus, please refer to the entries for these style classes under Top Navigation Bar. Both navigation systems share the classes.

.s4-treeView

Set as the value for the CssClass property in TreeViewNavigationManagerV4 SPNavigationManager control. Only used in an adjacent sibling selector style statement. Included in the master page.

Web Parts

.ms-rte-wpbox

Applied to DIV element that wraps the web part table when the web part is in a rich text editor (as compared to the web part being in a web part zone). Applied in conjunction with the 'ms-rtestate-read' class.

Web Part Title Bar Styles

.ms-WPHeader

Applied to TR element that contains the web part title bar; child of a TABLE (no ID or class) element that is a child of the 's4-wpTopTable' TABLE element. Also used as a parent in descendent selector style statements.

Ribbon Container

Nested styles for Ribbon container

#s4-ribbonrow

Applied to outermost parent DIV. Classes are also set (see below). Creates a minimum 43px height and allows groups that cannot be fit into the browser horizontally (after scaling browser window size) to "fall off the edge" of the ribbon; background color appears on some content pages.

Included in master page; must remain in master page for proper Ribbon functionality and modal dialog box styles.

A separate instance of the style is nested in a sub grouping of print only styles. This instance hides the Ribbon from print view.

Applied to outermost parent '#s4-ribbonrow' DIV in conjunction with s4-pr (both classes are set in the DIV); used by the Ribbon positioning system to convey current Ribbon state; 's4-ribbonrowhidetitle' is the default and is changed when the ECMAScript code initializes.

Included in master page; must remain in master page for proper Ribbon functionality.

No styles are present in OOTB SharePoint. Add your own style statement to hide the Ribbon by default on page load. .s4-ribbonrowhidetitle {display: none;}

#s4-ribboncont

First nested DIV; child of '#s4-ribbonrow' DIV element. Creates background image (via CSS Sprite) however it doesn't seem to be using this background image. Changes to the style don't affect anything - it may be used on a different SharePoint screen that has not been tested for this specifically.

Third nested DIV; child of '#RibbonContainer' DIV element. Set in conjunction with '.ms-cui-ribbon'.

'.ms-cui-ribbon' is assigned as a class to this DIV; styles are provided for this class and none are provided for this ID. This ID can be referenced in custom code to control the upper portion of the Ribbon (tabs and labels), such as adding a background.

.ms-cui-ribbon

Third nested DIV; child of '#RibbonContainer'. Set in conjunction with '#Ribbon'. Also used as a parent selector in descendent selectors for anchors and images.

Fifth nested DIV; child of 'ms-cui-ribbonTopBars' DIV element. When the Ribbon is active and depending on the state, other classes are added in conjunction with this style. The first style statement (.ms-cui-topBar2 with no descendant selector) controls the color of the rule line between the Ribbon tabs and the Ribbon command bar (content) in its default state.

The color of the border can be overridden but what is set for Ribbon specific tools (see below) will take precedence when they are applied.

Fifth nested DIV; child of 'ms-cui-ribbonTopBars' DIV element; applied in conjunction with 'ms-cui-topBar2' CSS class when a particular set of tools in the tab area has been activated (such as Editing Tools). Each of these classes is referenced as a parent in a style statement using a descendant selector in a unique style statement per listed class (8 style statements total across all listed classes). The following code sample is just one such instance. Please see the Ribbon Prefix Guide for a key to the CSS class names.

The style statement is marked as !important and due to the combination of classes in the statement, the statement controls both the bottom border color that is the rule line between the Ribbon tabs and Ribbon command bar and controls the bottom border of the command bar. This only applies when the given tool set is active in the Ribbon.

First visible nested DIV inside of 'ms-cui-topBar2' DIV element. Applied to DIV in conjunction with 'ms-siteactionscontainer' class. This DIV element can contain peripheral Ribbon elements - the Site Actions menu, the pop-out breadcrumb menu and the Edit icon is included in OOTB master pages.

If the peripheral elements are moved outside of the Ribbon area in a custom master page, these styles would not apply.

Custom components can be placed in this area.

This DIV also has an ID of 'RibbonContainer-TabRowLeft' applied in conjunction with the class.

Applied to a list item (LI) in the 'ms-cui-tts' UL element; selected tab state. Referenced as a parent for descendant and child selectors in 30 style statements. The following code sample is just one such instance.

Applied to the list items (LI) in the 'ms-cui-tts' UL element and applied in conjunction with 'ms-cui-cg' CSS class when a particular set of tools in the tab area has been activated (such as Editing Tools). Each of these classes is referenced as a parent in descendant selectors in 14 unique style statements per listed class (112 style statements total across all listed classes). The following code sample is just one such instance. Please see the Ribbon Prefix Guide for a key to the CSS class names.

Ribbon Command bar

Styles that wrap Ribbon command area (below Ribbon tabs)

A style statement is only provided for this class in the OOTB NightandDay master page/CSS file.

.ms-cui-tabBody

Applied to a list (UL) that is a child of the 'ms-cui-tabContainer' DIV element. When the Ribbon is active and depending on the state, other classes are added in conjunction with this style. This is the main outer container for the Ribbon command bar.

This is a great place to specify a different color for the command bar background or to change the width of the Ribbon. Note that changes to the top or bottom borders will affect the set and required height of 43px.

Applied to a list (UL) that is a child of the 'ms-cui-tabContainer' DIV element and applied in conjunction with 'ms-cui-tabBody' CSS class when a particular set of tools in the tab area has been activated (such as Editing Tools). Each of these classes is referenced as a parent in a style statement using a descendant selector in a unique style statement per listed class (8 style statements total across all listed classes). The following code sample is just one such instance. Please see the Ribbon Prefix Guide for a key to the CSS class names.

Applied to the list items (LI) within the 'ms-cui-tabBody' list (UL). Contains SPAN elements that wrap Ribbon commands; there is one LI per Ribbon command group (such as Edit, Manage, Page Actions). Referenced as a parent in descendant selectors.

Nested SPAN element; child of the 'ms-cui-ctl-a2' or 'ms-cui-dd-arrow-button' anchors; contains the arrow image for a command icon/label or combination box. Set in conjunction with 'ms-cui-img-cont-float' CSS class.

Seventh nested SPAN; child of 'ms-cui-ctl-large' SPAN element. Wraps the icon portion of a split-button command in the case of a split button where the icon and label are in the same container and light up together on hover.

This element is a child of 'ms-cui-ctl-large' SPAN, and the parent of 'ms-cui-ctl-large' ANCHOR.

Applied to SPAN element; child of 'ms-cui-ctl-a1' ANCHOR element. Wraps 'ms-cui-img-32by32' SPAN element that contains the icon in a split button where the icon and label are in separate containers and light up individually on hover.

Applied to ANCHOR element that wraps arrow beneath command image and label in a spilt button command; child of 'ms-cui-ctl-large' SPAN element. Referenced as a parent in descendant and child selectors.

This is used in both instances where the arrow is separate from the icon/label and where the arrow is combined with the label and is separate from the icon.