CINXE.COM
CSS additive-symbols Descriptor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS additive-symbols descriptor, @counter-style at-rule, cyclic, alphabetic, numeric"> <meta name="Description" content="CSS additive-symbols descriptor is used with the @counter-style rule to specify an additive typle if the system is additive."> <link rel="canonical" href="https://www.quackit.com/css/at-rules/descriptors/css_additive-symbols_descriptor.cfm"> <title>CSS additive-symbols Descriptor</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS additive-symbols Descriptor</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/article_header --> <div data-fuse="23059883623"></div> </div> <p class="lead">The CSS <code>additive-symbols</code> descriptor is used with the <a href="/css/at-rules/css_counter-style_at-rule.cfm"><code>@counter-style</code></a> at-rule to specify an <dfn>additive tuple</dfn> that is to be used if the system is <code>additive</code>.</p> <p>The <a href="/css/at-rules/css_counter-style_at-rule.cfm"><code>@counter-style</code></a> rule accepts a name, followed by a number of descriptors, which define the counter style. The <code>additive-symbols</code> descriptor allows you to to specify symbols to be used for counter representations when the value of the <a href="/css/at-rules/descriptors/css_system_descriptor.cfm"><code>system</code></a> descriptor is <code>additive</code>.</p> <p>An additive tuple consists of a counter symbol and a non-negative <a href="/css/data_types/css_integer_data_type.cfm"><var class="css-data-type">integer</var></a> weight. The additive tuples must be specified in order of descending weight. </p> <p>Here's an example of using the <code>additive-symbols</code> descriptor. </p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false">@counter-style dice {
	system: additive;
	additive-symbols: 6 "\2685", 5 "\2684", 4 "\2683", 3 "\2682", 2 "\2681", 1 "\2680";
	suffix: " ";
} 
 
ul { 
 list-style-type: dice;
}</textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>If your browser supports the <a href="/css/at-rules/css_counter-style_at-rule.cfm"><code>@counter-style</code></a> at-rule, the above code could result in a list that looks something like this:</p> <figure> <img class="img-responsive" src="/pix/stock/css_counter-style_additive.gif" alt="Example of an unordered list styled using the additive system."> <figcaption> An unordered list using the additive system (<code>system: additive</code>). This example uses the unicode code points that represent the die faces 1 to 6 for its markers. These are specified with the <code>additive-symbols</code> descriptor. As the list progresses these characters are arranged so that the relevant die face is shown. If there are more than six list items, multiple die faces are shown so that they add up to the relevant list item count. </figcaption> </figure> <h2>Possible Values</h2> <p>The <code>additive-symbols</code> descriptor accepts the following values.</p> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">[ <integer> && <symbol> ]#</textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>The <a href="/css/data_types/css_integer_data_type.cfm"><var class="css-data-type">integer</var></a> represents the non-negative integer weight.</p> <p>The <var class="css-data-type">symbol</var> can be a <a href="/css/data_types/css_string_data_type.cfm"><var class="css-data-type">string</var></a>, <a href="/css/data_types/css_image_data_type.cfm"><var class="css-data-type">image</var></a>, or <a href="/css/data_types/css_custom-ident_data_type.cfm"><var class="css-data-type">custom-ident</var></a>, and the three types can be mixed in a single descriptor. </p> <p>Counter representations are constructed by concatenating counter symbols together. Identifiers are rendered as strings containing the same characters. Images are rendered as inline replaced elements. The default object size of an image counter symbol is a 1em by 1em square.</p> <h2>Official Specifications</h2> <p>The <code>additive-symbols</code> descriptor is <a href="https://www.w3.org/TR/css-counter-styles-3/#counter-style-additive-symbols">defined</a> in <a href="https://www.w3.org/TR/css-counter-styles-3/">CSS Counter Styles Level 3</a> (W3C Candidate Recommendation, 11 June 2015).</p> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/at-rules/">CSS @-rules</a></h3> <ul> <li><a href="/css/at-rules/css_bottom-center_at-rule.cfm">@bottom-center</a></li> <li><a href="/css/at-rules/css_bottom-left_at-rule.cfm">@bottom-left</a></li> <li><a href="/css/at-rules/css_bottom-left-corner_at-rule.cfm">@bottom-left-corner</a></li> <li><a href="/css/at-rules/css_bottom-right_at-rule.cfm">@bottom-right</a></li> <li><a href="/css/at-rules/css_bottom-right-corner_at-rule.cfm">@bottom-right-corner</a></li> <li><a href="/css/at-rules/css_charset_at-rule.cfm">@charset</a></li> <li><a href="/css/at-rules/css_counter-style_at-rule.cfm">@counter-style</a></li> <li><a href="/css/at-rules/css_document_at-rule.cfm">@document</a></li> <li><a href="/css/at-rules/css_font-face_at-rule.cfm">@font-face</a></li> <li><a href="/css/at-rules/css_font-feature-values_at-rule.cfm">@font-feature-values</a></li> <li><a href="/css/at-rules/css_import_at-rule.cfm">@import</a></li> <li><a href="/css/at-rules/css_left-bottom_at-rule.cfm">@left-bottom</a></li> <li><a href="/css/at-rules/css_left-middle_at-rule.cfm">@left-middle</a></li> <li><a href="/css/at-rules/css_left-top_at-rule.cfm">@left-top</a></li> <li><a href="/css/at-rules/css_keyframes_at-rule.cfm">@keyframes</a></li> <li><a href="/css/at-rules/css_media_at-rule.cfm">@media</a></li> <li><a href="/css/at-rules/css_namespace_at-rule.cfm">@namespace</a></li> <li><a href="/css/at-rules/css_page_at-rule.cfm">@page</a></li> <li><a href="/css/at-rules/css_right-bottom_at-rule.cfm">@right-bottom</a></li> <li><a href="/css/at-rules/css_right-middle_at-rule.cfm">@right-middle</a></li> <li><a href="/css/at-rules/css_right-top_at-rule.cfm">@right-top</a></li> <li><a href="/css/at-rules/css_supports_at-rule.cfm">@supports</a></li> <li><a href="/css/at-rules/css_top-center_at-rule.cfm">@top-center</a></li> <li><a href="/css/at-rules/css_top-left_at-rule.cfm">@top-left</a></li> <li><a href="/css/at-rules/css_top-left-corner_at-rule.cfm">@top-left-corner</a></li> <li><a href="/css/at-rules/css_top-right_at-rule.cfm">@top-right</a></li> <li><a href="/css/at-rules/css_top-right-corner_at-rule.cfm">@top-right-corner</a></li> </ul> </li> <li> <h3><a href="/css/at-rules/descriptors/">@-Rule Descriptors</a></h3> <ul> <li><a href="/css/at-rules/descriptors/css_additive-symbols_descriptor.cfm">additive-symbols</a></li> <li><a href="/css/css3/properties/css_bleed.cfm">bleed</a></li> <li><a href="/css/at-rules/descriptors/css_fallback_descriptor.cfm">fallback</a></li> <li><a href="/css/at-rules/descriptors/css_font-family_descriptor.cfm">font-family</a></li> <li><a href="/css/at-rules/descriptors/css_font-feature-settings_descriptor.cfm">font-feature-settings</a></li> <li><a href="/css/at-rules/descriptors/css_font-style_descriptor.cfm">font-style</a></li> <li><a href="/css/at-rules/descriptors/css_font-weight_descriptor.cfm">font-weight</a></li> <li><a href="/css/at-rules/descriptors/css_font-stretch_descriptor.cfm">font-stretch</a></li> <li><a href="/css/at-rules/descriptors/css_font-variant_descriptor.cfm">font-variant</a></li> <li><a href="/css/properties/css_marks.cfm">marks</a></li> <li><a href="/css/at-rules/descriptors/css_negative_descriptor.cfm">negative</a></li> <li><a href="/css/at-rules/descriptors/css_pad_descriptor.cfm">pad</a></li> <li><a href="/css/at-rules/descriptors/css_prefix_descriptor.cfm">prefix</a></li> <li><a href="/css/at-rules/descriptors/css_range_descriptor.cfm">range</a></li> <li><a href="/css/at-rules/descriptors/css_speak-as_descriptor.cfm">speak-as</a></li> <li><a href="/css/at-rules/descriptors/css_src_descriptor.cfm">src</a></li> <li><a href="/css/at-rules/descriptors/css_suffix_descriptor.cfm">suffix</a></li> <li><a href="/css/at-rules/descriptors/css_symbols_descriptor.cfm">symbols</a></li> <li><a href="/css/at-rules/descriptors/css_system_descriptor.cfm">system</a></li> <li><a href="/css/at-rules/descriptors/css_unicode-range_descriptor.cfm">unicode-range</a></li> </ul> </li> <li> <h3>Paged Media Concepts</h3> <ul> <li><a href="/css/at-rules/what_is_a_page-margin_box_in_css.cfm">What is a Page-Margin Box?</a></li> <li><a href="/css/at-rules/css_page-margin_properties_list.cfm">Page-Margin Properties List</a></li> <li><a href="/css/at-rules/css_page_properties_list.cfm">Page Properties List</a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_2 --> <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/article_vrec_1 --> <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2024 Quackit.com </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>