numerada - listas no ordenadas html
Saltar ordenada lista de numeración de elementos (5)
Tengo una lista ordenada y me gustaría omitir la salida del número de un artículo en particular.
Salida tradicional:
1. List item
2. List item
3. List item
4. List item
5. List item
Salida deseada:
1. List item
2. List item
Skipped list item
3. List item
4. List item
5. List item
¿Es esto posible en CSS? Descubrí un atributo <ol> "start" que no conocía antes, pero que no parece ayudarme.
Es bastante simple ahora.
Simplemente agregue lo siguiente a una clase .skip con .skip que se usa para el elemento de lista omitido:
ol li.skip {
list-style-type:none;
counter-increment:none;
}
en HTML sería:
<ol>
<li>first list item</li>
<li class="skip">2nd list item</li>
<li>third list item</li>
</ol>
Resultando en:
- primer elemento de la lista
Segundo elemento de la lista - tercer elemento de la lista
Esta es mi solución (solo con CSS) que le permite mantener el uso normal de un li (elemento de lista) de un ol (lista ordenada). Eso significa que todos los elementos li son competentes y no hay ningún elemento que no represente lo mismo que su vecino.
Código justo debajo:
.term-and-condition li {
position: relative;
}
.term-and-condition ol ol {
list-style-type: lower-latin;
}
.term-and-condition h2 {
position: absolute;
top: -2.4em;
left: -1.5em;
}
.term-and-condition h3 {
position: absolute;
top: -2.4em;
left: -1.5em;
}
.term-and-condition h2 + *,
.term-and-condition h3 + * {
margin-top: 4em;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skip ordered list item numbering</title>
</head>
<body>
<article class="term-and-condition">
<h1>Participants agree to be bound by these Terms and Conditions</h1>
<ol>
<li>
<h2>The Promoter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
</li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>
<li>
<h2>Eligibility</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
</li>
<li>
<h2>Entry</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p>
</li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li>
<li>
<p>Entrants must upload an image and text that:</p>
<ol>
<li><p>Lorem ipsum dolor sit amet, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere</p></li>
<li><p>consectetur adipisicing elit. Veritatis dolorum consequuntur,</p></li>
<li><p>in amet libero magnam consectetur facere,</p></li>
<li><p>accusantium sed, adipisci aliquam unde! Sit, iure.</p></li>
<li>
<h3>Additional requirements</h3>
<p>All entries must be the participant’s own image or have the relevant permission</p>
</li>
<li><p>The entrant must be the lorem</p></li>
</ol>
</li>
<li>
<h2>Winner Selection</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tenetur minus dolores! Natus harum pariatur voluptas, voluptatibus magnam, animi explicabo eos laudantium delectus nobis repellat dicta eveniet, et blanditiis ducimus!</p>
</li>
</ol>
</article>
</body>
</html>
La forma más sencilla es eliminar el marcador de lista del elemento que se va a omitir y establecer el número del siguiente elemento utilizando el atributo de value (que no quedará obsoleto / obsoleto en HTML5). Ejemplo:
<ol>
<li>List item
<li>List item
<li style="list-style-type: none">List item
<li value=3>List item
<li>List item
</ol>
Otra opción es utilizar contadores CSS3: demo
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;
}
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"; /* some white-space... optional */
}
Una cosa que intenté que parecía funcionar era simplemente agregar un tamaño de fuente: 0. Esto podría aplicarse a la clase "saltar" mencionada anteriormente.
Es cierto que esta solución carece de cierta pureza de HTML, pero es bastante simple.