How do you change the language in which a CSS counter displays when using alphabetical characters?
.outer {
counter-increment:question;
}
.inner {
content:counter(question, lower-alpha) ".";
}
Use one of the list-style-type settings (there's a whole list on that MDN page):
li {
content:counter(question, lower-alpha) ".";
list-style-type: lower-armenian;
}
http://jsfiddle.net/543aL6my/
Which gives:
Note that the case will follow whatever the list-style-type is, even though you've passed it to counter().
You could just add a language selector to target different languages:
inner:lang(it) {
content:counter(question, lower-alpha) ".";
}
obviously you'd need to also modify markup but it souldn't be too difficult.
Related
I just want a rule that acts like so:
div:before {
content: "div";
}
span:before {
content: "span";
}
a:before {
content: "a";
}
but I want it to be generic for all element types, not just a div.
I want this...
*:before {
content: attr(tagname);
}
But tagname is not an attribute. Is there any way to get the element's type as a string in CSS?
No, there is no way. Generated content can be specified in a few ways only. What you are trying to do requires client-side scripting, perhaps so that CSS rules are dynamically added to elements, and in the script code, you can use the tag name from the element node.
I need to create a style for ordered lists that follows this format:
(a) List Item 1
(b) List Item 2
(1) List Item 2.1
(2) List Item 2.2
(i) List Item 2.2.1
(ii) List Item 2.2.2
Unfortunately, list-style-type doesn't work because there are no options that show the numbers as listed above, with parentheses.
LOTS of researching has brought about nothing but ugly hacks, for example:
ol {
list-style-type: none;
}
ol>li:before {
content: "(" counter(lvl1, lower-alpha) ") ";
}
ol li {
counter-increment: lvl1;
}
ol ol>li:before {
content: "(" counter(lvl2, decimal) ") ";
}
ol ol>li {
counter-increment: lvl2;
}
ol ol ol>li:before {
content: "(" counter(lvl3, lower-roman) ") ";
}
ol ol ol>li {
counter-increment: lvl3;
}
which works to some extent, removing the list numbering with list-style-type: none; and inserting the number surrounded with parentheses at the beginning of the li. This makes modifying other related styling horrific, as I can't figure out how to line things up nicely etc (I don't think its even possible). It also makes list-style-position redundant, because the numbers are ALWAYS inside the li.
Basically, I'm looking for a way to reproduce this kind of list numbering in CSS: (note text alignment etc)
ANY help VERY MUCH appreciated!!
You're almost there.
Since you're removing list-style, you can restore the position of the counters by applying padding to the list items and then pulling the counters into that padding with a negative margin (or one of many similar techniques e.g. hanging indent)
li {
padding: 2em;
}
li:before {
/* Take counter out of flow and pull it into padding space */
float: left;
margin-left: -2em;
}
You also need to sprinkle some counter-reset into the mix for each level of ol nesting.
JSFiddle showing a full working example with all the nesting code here: http://jsfiddle.net/thefrontender/tzzbh/2/
I want to have multiple "ol" lists where the counter value does not reset between lists. Another way to say this is that I want the counter for the first "li" in the second list to be one higher than the counter value from the last element of the previous list. Is there some CSS magic that will do this?
While Su's answer would work, you don't need to be so heavy-handed. Just reset the counter at the top, and everywhere you use it, it will increment.
body {
counter-reset: item;
}
li {
display: block;
}
li:before {
display: inline-block;
content: counter(item) ". ";
counter-increment: item;
}
see this example
Not quite with just CSS. It does provide you with some control over counters (and support is pretty good), but it's still static in it's behavior. So this works:
<html>
<head>
<style>
#list-one {
counter-reset : item;
}
#list-two {
counter-reset : item 3;
}
li {
display : block;
}
li:before {
display : inline-block;
content : counter(item) ". ";
counter-increment : item;
}
</style>
</head>
<body>
<ol id="list-one">
<li>One</li><li>Two</li><li>Three</li>
</ol>
<ol id="list-two">
<li>Four</li><li>Five</li><li>Six</li>
</ol>
</body>
</html>
…but you can't just drop two lists after each other and have the second one automatically pick up where the other left off(see the "3" in the second CSS rule). With a little creativity, though, you could probably wrap the counter-reset styling with a bit of PHP or whatever you're using to build your site. This is dependent upon the particulars of your situation, of course.
Is it possible with CSS to change the style of the number in an <ol> without changing the entire text in the <li> without adding extra markup around the li content?
You can disable the original <ol> style, then use :before selector with counters to add whatever style you want. Like here:
ol {
counter-reset: i 0;
}
ol li:before {
content: counter(i);
counter-increment: i;
padding-right: 0.5em;
color: red;
}
If you wish, you can even override some styles for particular elements of the list with nth-child selector (JS Fiddle):
ol li:nth-child(3):before {
color: violet;
}
... as cascading rules are still applied here. Note, though, that nth-child is not supported by IE8.
I'm using wordpress and I want my bullets to appear like
i)
ii)
iii)
its the brackets actually that I'm looking for.
[ Edited & fixed. Thanks, Mike Miller! ]
You can use CSS counters :)
ul {
counter-reset: items 0;
}
li {
list-style-type: none;
}
li:before {
counter-increment: items 1;
content: counter(items, lower-roman) ") ";
}
You can see live how this works at http://dabblet.com/gist/2724823
I think the best you can do is
li:before { content: ")" };
And then set a negative left margin.
If the specific numbering style is essential, make it part of the content and either suppress default browser-generated numbers or don’t use ul markup at all, e.g.
<div>i) first item</div>
or (if you may need to style the numbers
<div><span class=num>i)</span> first item</div>
You can alternative generate the numbers using CSS (generated content and :before pseudoelements), but it’s clumsier, especially if you need to ensure reasonable presentation on all browsers.