{"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 se usan). Los contadores te permiten ajustar la apariencia del contenido seg\u00fan su ubicaci\u00f3n en el documento.<\/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 se usan). Los contadores te permiten ajustar la apariencia del contenido seg\u00fan su ubicaci\u00f3n en el documento.","_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}]}}