html - div - ¿Puedes contar una clase en particular con CSS?
title html (7)
Aqui tienes:
https://jsfiddle.net/Cheese1991/qnmhvvxj/
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS:
ul {
counter-reset:yourCounter;
list-style:none;
}
ul li:not(.skip) {
counter-increment:yourCounter;
list-style:none;
}
ul li:not(.skip):before {
content:counter(yourCounter) ". ";
}
ul li.skip:before {
content:"/a0/a0/a0";
}
Espero que esto ayude
Digamos que tengo una lista simple como esta:
<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li class="count">seven</li>
</ol>
Ahora solo quiero numerar elementos de la lista con la clase ''contar''
Entonces si agrego el CSS:
li {
list-style-type: decimal;
}
y luego elimine el tipo de estilo de lista para los elementos de la lista sin la clase:
li:not(.count) {
list-style-type: none;
}
Entiendo esto:
li {
list-style-type: decimal;
}
li:not(.count) {
list-style-type: none;
}
<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li class="count">seven</li>
</ol>
El problema obvio aquí es que los elementos de la lista sin la clase también se ''cuentan'' aquí, simplemente no se muestran.
Por lo tanto, en el ejemplo anterior, la lista debe numerarse a 7, con la numeración omitiendo los elementos de la lista sin la clase. ¿Se puede hacer esto con CSS?
Dando display: block a los elementos li sin clase .count también está funcionando.
ul {
list-style-type:decimal;
padding-left: 30px;
}
li:not(.count) {
display: block;
}
Para navegadores antiguos:
ul {
list-style-type:decimal;
padding-left: 30px;
}
li {
display: block;
}
li.count {
display: list-item;
}
Otra forma, si planea cambiar el estado de visualización de todos los elementos li , use :after / :before pseudo classes con display as list-item.
Esto se puede hacer con CSS-counters
Si configuro la display:none en el contenido generado con el contador, ¡el contador salta sobre ella y continúa con el siguiente elemento!
( Editar: O, alternativamente, como han señalado otros), podríamos incrementar el contador solo en los elementos con la clase particular, como así )
ol {
counter-reset: count;
list-style-type: none;
padding-left: 30px;
}
li:before {
content: counter(count)".";
counter-increment: count;
}
li:not(.count) {
padding-left: 13px;
}
li:not(.count):before {
display: none;
}
<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li class="count">seven</li>
</ol>
De hecho, con los contadores, no solo podemos contar las clases, sino que también podemos contar cualquier combinación de selectores.
Aquí hay un ejemplo de prueba de concepto:
html {
counter-reset: divs;
}
body {
counter-reset: paragraphs;
position: relative;
}
div {
counter-increment: divs;
}
.wpr {
counter-reset: count-me;
position: relative;
}
.container {
position: relative;
border-bottom: 1px solid green;
}
.container .count-me {
counter-increment: count-me;
}
.container p {
counter-increment: paragraphs;
}
.wpr:after {
content: "Number of count-me classes in container:" counter(count-me);
position: absolute;
bottom: -20px;
}
.container:after {
content: "Number of paragraphs:" counter(paragraphs);
position: absolute;
bottom: -40px;
}
body:after {
content: "Number of divs:" counter(divs);
position: absolute;
bottom: -60px;
}
<div class="wpr">div1
<div class="container">div2
<div>div3
<span class="count-me">count-me</span>
</div>
<div>div4
<span class="count-me">count-me</span>
<p>I"m a paragragh</p>
</div>
<div>div5
<p>I"m a paragragh</p>
</div>
<div>div6
<span class="count-me">count-me</span>
</div>
<div>div7
<span class="count-me">count-me</span>
<p>I"m a paragragh</p>
</div>
<div>div8</div>
</div>
</div>
La sección de contadores en las especificaciones de CSS 2.1 contiene varios ejemplos de cómo implementar su contador personalizado. Aquí hay un ejemplo muy simple en el que usted:
- Definir una variable de contador
- Increméntelo para elementos específicos (en su caso sería elementos
.count) - Mostrarlo dentro de los pseudo elementos
.custom-counter {
/* define a counter variable */
counter-reset: clumsycount 0;
/* style */
list-style-type: none;
}
.custom-counter .count {
/* increment the counter variable */
counter-increment: clumsycount 1;
/* style */
position: relative;
background-color: #EEE;
}
.custom-counter .count:before {
/* display the counter variable */
content: counter(clumsycount) ".";
/* style */
position: absolute;
top: 0;
right: 100%;
padding-right: .25em;
background-color: #CCC;
}
<ul class="custom-counter">
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li class="count">seven</li>
</ul>
Puede usar HTML para establecer específicamente el valor de un elemento de la lista:
<ul>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li value="5" class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li value="7" class="count">seven</li>
</ul>
http://jsfiddle.net/03bu5sct/1/
También puede mirar los contadores CSS3 si quiere una solución pura de CSS.
Una solución podría ser usar CSS-counters y aplicarlos usando pseudo-elemento :before avanzar en la propiedad del content con contador,
Los contadores pueden especificarse con dos funciones diferentes: ''contador ()'' o ''contadores ()''. El primero tiene dos formas: ''contador (nombre)'' o ''contador (nombre, estilo)''. El texto generado es el valor del contador más interno del nombre dado en el alcance en este pseudo-elemento; está formateado en el estilo indicado (''decimal'' por defecto). La última función también tiene dos formas: ''contadores (nombre, cadena)'' o ''contadores (nombre, cadena, estilo)''. El texto generado es el valor de todos los contadores con el nombre dado en el alcance de este pseudo-elemento, desde el más externo hasta el más interno, separados por la cadena especificada. Los contadores se representan en el estilo indicado (''decimal'' por defecto). Consulte la sección sobre contadores automáticos y numeración para obtener más información. El nombre no debe ser ''ninguno'', ''heredar'' o ''inicial''. Tal nombre hace que la declaración sea ignorada.
solo en elementos li con count clases:
body {
counter-reset: section;/* Set the section counter to 0 */
}
ol {
list-style-type: none;
}
li.count::before {
counter-increment: section;/* Increment the section counter*/
content: counter(section)". ";/* Display the counter */
}
<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li>
<li class="count">four</li>
<li>blabla</li>
<li class="count">five</li>
<li class="count">six</li>
<li>blabla</li>
<li class="count">seven</li>
</ol>
Referencias
li {
list-style-type: decimal;
}
li:not(.count) {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
este es un simple hack http://jsfiddle.net/9w9vkcf3/1/
La propiedad de
appearancese usa para mostrar un elemento utilizando un estilo nativo de plataforma basado en el tema del sistema operativo de los usuarios. source