{"id":1356,"date":"2024-08-01T19:12:58","date_gmt":"2024-08-01T17:12:58","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1356"},"modified":"2024-08-01T19:12:58","modified_gmt":"2024-08-01T17:12:58","slug":"49-contadores-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-basico\/49-contadores-css\/","title":{"rendered":"49. Contadores CSS"},"content":{"rendered":"\n

Los contadores CSS<\/strong> son \u00abvariables\u00bb mantenidas por CSS<\/strong> cuyos valores pueden incrementarse mediante reglas de CSS<\/strong> (para rastrear cu\u00e1ntas veces se usan). Los contadores<\/strong> te permiten ajustar la apariencia del contenido seg\u00fan su ubicaci\u00f3n en el documento.<\/p>\n\n\n\n\n\n\n\n

Numeraci\u00f3n autom\u00e1tica con contadores<\/h2>\n\n\n\n

Los contadores CSS<\/strong> son como \u00abvariables\u00bb. Los valores de las variables se pueden incrementar mediante reglas CSS (que rastrear\u00e1n cu\u00e1ntas veces se usan).<\/p>\n\n\n\n

Para trabajar con contadores CSS usaremos las siguientes propiedades:<\/p>\n\n\n\n

    \n
  • counter-reset:<\/em><\/strong>\u00a0Crea o restablece un contador<\/li>\n\n\n\n
  • counter-increment:<\/em><\/strong>\u00a0Incrementa un valor de contador<\/li>\n\n\n\n
  • content:<\/em><\/strong>\u00a0Inserta contenido generado<\/li>\n\n\n\n
  • funci\u00f3n counter()<\/em><\/strong> o counters():<\/em><\/strong>\u00a0Agrega el valor de un contador a un elemento<\/li>\n<\/ul>\n\n\n\n

    Para usar un contador CSS, primero debe crearse con counter-reset<\/em><\/strong>. El siguiente ejemplo crea un contador para la p\u00e1gina (en el selector de cuerpo), luego incrementa el valor del contador para cada elemento <h2><\/em><\/strong> y agrega \u00abSecci\u00f3n <valor del contador>:\u00bb al comienzo de cada elemento <h2><\/em><\/strong>.<\/p>\n\n\n\n

    Ejm<\/strong><\/p>\n\n\n\n

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
            counter-reset: section;
          }

          h2::before {
            counter-increment: section;
            content: \"Section \" counter(section) \": \";
          }
        <\/style>
      <\/head>
      <body>
        <h1>Usando contadores CSS<\/h1>

        <h2>HTML Tutorial<\/h2>
        <h2>CSS Tutorial<\/h2>
        <h2>JavaScript Tutorial<\/h2>
        <h2>Python Tutorial<\/h2>
        <h2>SQL Tutorial<\/h2>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Contadores de anidamiento<\/h2>\n\n\n\n
    El siguiente ejemplo crea un contador para la p\u00e1gina (section) y un contador para cada elemento <h1><\/em><\/strong> (subsection). El contador de \u00absection\u00bb se contar\u00e1 para cada elemento <h1><\/em><\/strong> con \u00abSection<valor del contador de secci\u00f3n>.\u00bb, y el contador de \u00absubsection\u00bb se contar\u00e1 para cada elemento <h2><\/em><\/strong> con \u00ab<valor del contador de secci\u00f3n >.<valor del contador de subsecciones>\u00bb.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          body {
            counter-reset: section;
          }

          h1 {
            counter-reset: subsection;
          }

          h1::before {
            counter-increment: section;
            content: \"Section \" counter(section) \". \";
          }

          h2::before {
            counter-increment: subsection;
            content: counter(section) \".\" counter(subsection) \" \";
          }
        <\/style>
      <\/head>
      <body>
        <h1>HTML\/CSS Tutorials<\/h1>
        <h2>HTML<\/h2>
        <h2>CSS<\/h2>
        <h2>Bootstrap<\/h2>
        <h2>W3.CSS<\/h2>

        <h1>Scripting Tutorials<\/h1>
        <h2>JavaScript<\/h2>
        <h2>jQuery<\/h2>
        <h2>React<\/h2>

        <h1>Programming Tutorials<\/h1>
        <h2>Python<\/h2>
        <h2>Java<\/h2>
        <h2>C++<\/h2>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Un contador tambi\u00e9n puede ser \u00fatil para hacer listas delineadas porque una nueva instancia de un contador se crea autom\u00e1ticamente en los elementos secundarios. Aqu\u00ed usamos la funci\u00f3n counters()<\/em><\/strong> para insertar una cadena entre diferentes niveles de contadores anidados:<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          ol {
            counter-reset: section;
            list-style-type: none;
          }

          li::before {
            counter-increment: section;
            content: counters(section, \".\") \" \";
          }
        <\/style>
      <\/head>
      <body>
        <ol>
          <li>item<\/li>
          <li>
            item
            <ol>
              <li>item<\/li>
              <li>item<\/li>
              <li>
                item
                <ol>
                  <li>item<\/li>
                  <li>item<\/li>
                  <li>item<\/li>
                <\/ol>
              <\/li>
              <li>item<\/li>
            <\/ol>
          <\/li>
          <li>item<\/li>
          <li>item<\/li>
        <\/ol>

        <ol>
          <li>item<\/li>
          <li>item<\/li>
        <\/ol>
      <\/body>
    <\/html><\/pre>\n\n\n\n
    Resumen<\/h2>\n\n\n\n
    Propiedad<\/th>Descripci\u00f3n<\/th><\/tr>
    content<\/td>Usado con los pseudo-elementos ::before y ::after, para insertar contenido generado<\/td><\/tr>
    counter-increment<\/td>Incrementa uno o m\u00e1s valores de contador<\/td><\/tr>
    counter-reset<\/td>Crea o restablece uno o m\u00e1s contadores<\/td><\/tr>
    counter()<\/td>Devuelve el valor actual del contador nombrado<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Los contadores CSS son \u00abvariables\u00bb mantenidas por CSS cuyos valores pueden incrementarse mediante reglas de CSS (para rastrear cu\u00e1ntas veces […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":563,"menu_order":48,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1356","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Los contadores CSS son \u00abvariables\u00bb mantenidas por CSS cuyos valores pueden incrementarse mediante reglas de CSS (para rastrear cu\u00e1ntas veces […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1356"}],"version-history":[{"count":3,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1356\/revisions"}],"predecessor-version":[{"id":1359,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1356\/revisions\/1359"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/563"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}