In a ul li list , how to make an alternate li bold. Like shown in the image.
Thanks
Use the nth-child(even) pseudo selector:
li:nth-child(even) {
font-weight: bold;
}
Use odd or even depending on whether you want the first one bold.
Demo on jsfiddle.
You can do something like this
ul li:nth-child(odd)
{
font-weight:bold;
}
See Demo
Note:If you want to start from first li element then use odd if you want to start from second element then use even as alexn suggests in his answer.
Related
How do you change styles of another element based on whether the first element is empty.
<ul></ul>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
In the above code, I want to give a style for the second ul { color:red } (to be more exact the ul that follows) ONLY if the first ul is empty.
Is there a pure CSS solution for this?
You can do this, but only if the element in question is completely empty- yes, not even a whitespace.
http://jsfiddle.net/NicoO/uTJ4N/
ul:empty + ul
{
color: red;
}
To be more accurate, this is the selector you need for the first empty <ul> of the body and the exact following <ul>:
body > ul:first-of-type:empty + ul
{
color: red;
}
http://jsfiddle.net/NicoO/uTJ4N/1/
Try this code:
ul > li {
color: red;
}
Its selects the ul which has a li as child element. And those can be colored red then.
http://jsfiddle.net/keypaul/KfaQv/1/
ul:not(:empty) {
color:red;
}
I dont think a pure css solution is the way to go, but you can use a pre-processor as they allow you to pass conditional statements.
Well, mi question is very similar to this question: How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?
But in my case, I want to style the letters in an lower-alpha list (or any ordered list), but considering that each item will have a different content, so, I can't use the content:""; trick.
Is there any way to do this without JS or something?
I tried to play with different combinations of pseudo classes and pseudo elements, but I think that's not the right way.
The code I tried, as you can see in the fiddle:
Relevant HTML
<ol>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
<li>Hola</li>
</ol>
CSS I have tried (without success)
/*ol li:first-letter {color:red;}*/
/*ol li:first-child {color:red;}*/
/*ol li:before {content:"lower-alpha";}*/
/*ol li:before:first-letter {content:"lower-alpha";}*/
/*ol:first-letter li {color:red;}*/
ol:first-letter li {color:red;}
ol li {color:black;}
Here is a possibility using the counter-reset / counter-increment properties:
ol {list-style:none; margin:0; padding:0; counter-reset:list;}
ol li {margin:0 0 5px; padding:0;}
ol li:before {
counter-increment:list;
content:counter(list, lower-alpha) ". ";
color:red;
}
see fiddle: http://jsfiddle.net/jRVH5/14/
For future generations: Newest addition to browsers (FF68+, Ch80+)
::marker {
color: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::marker
Style the bullets/characters of a list by using either ol or li CSS properties. Then use a span tag inline to change the actual list item text to be something different if you like.
li {
color: green;
}
span {
color: black;
}
http://jsfiddle.net/jRVH5/9/
I want to make my wordpress menu items have 2 different background colors: one for the link and one for :hover. I'm a CSS beginner and found a solution but unfortunately it's not a good one because I target by the menu id generated by wordpress and if I delete the menu and create another one, that id will be gone and my styling will not work anymore.
Example:
menu-item-1212 a {
background-color:#fff;
}
menu-item-1212 a:hover{
background-color:#000;
}
Is there a more elegant way to solve this so that no matter what id the first menu item will have, it will retain that background-color and the hover one?
I've searched online for an alternative and found :nth-child. I did tried to create something like this:(but it didn't worked)
#menu-secondary li a:nth-child(1) {
background-color:#fff;
}
#menu secondari li a:hover:nth-child(1) {
background-color:#000;
}
Will appreciate any suggestion, thanks.
You are targeting an anchor which is the nth child of li element. Each li only has one anchor probably. You need to target li as the nth child of the menu, like this:
#menu-secondary li:nth-child(1) a {
background-color:#fff;
}
#menu secondari li:nth-child(1) a:hover {
background-color:#000;
}
You won't even need nth-child if you are using a common background color and common hover color..
#menu-secondary li a {
/* Styles goes here */
}
As you said you are not looking forward to use an id as it may be dynamic, than you can also select the elements using element selector if it's unique, like
div.class_name ul li a { /* class_name indicates your wrapper element class name */
/* Styles goes here */
}
Also be sure you make your anchor tag display: block; if you want to cover up entire li
Morning Guys,
I have a CSS issue that's driving me up the wall. I have an unordered list with custom bullet images:
.mainTable ul {
list-style-position: inside;
list-style-image: url(../img/bullet_white.png);
line-height: 18px;
color: #335;
}
Now some of these list items contain links and some do not. For the ones that do, I'd like the bullet to change on rollover. Not too tricky you'd think... Here's how I marked it up:
.mainTable ul li a:link {
padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
list-style-image: url(../img/bullet_red.png);
padding-left:2px; // padding changes (moves link text), but bullet's still white
}
Now I've sussed (as the padding changes) that the styling is being applied to the inner link, and not the "li" container. I tried testing:
.mainTable ul li:hover
and the image changes, but it changes for all "li" tags in scope (because that's what I've told it to do), but that's not what I'm after. There must be a simple way of doing this without resorting to js but I'll be buggered if I can figure it out.
Any suggestions? All help (even if it's just "You need to use js you nugget") gratefully appreciated :)
Danny
GOT IT SORTED! (can't answer my own question yet - for some reason...)
Thanks for the heads up guys. The answer is a mixture of the above suggestions. Moving the bullets from the li tags and on to the anchors worked a treat, but the list items without the link got no bullet...DOH!
I then set up another class, "notALink", and stuck my default list styling on it. Here's the Markup if anyone's interested...
.mainTable ul { /* kill formatting on the ul */
list-style-position: inside;
line-height: 18px;
color: #335;
list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
list-style-image: url(../img/bullet_red.png);
}
Works fine - Cheers peeps, you've dug me out of a little hole I was digging myself
Danny
No, there is no way to change parent on child hover in pure CSS (2 or 3). See: Is there a CSS parent selector?
So you have two options:
Use JavaScript
or
Leave list style as empty and add bullets to childs (a or something else). That way, you will change style of a, not li.
This is what I would do;]
or (from Yi Jiang comment)
Add extra class to li elements containing a
What you can do is style the a as display: block and move it to the left (using negative margin) to cover the li:s bullet. Check this fiddle:
http://jsfiddle.net/TG5Lj/
You may need to set a background-color to the a as well if your a:s background-image doesn't completely cover the li:s.
Try applying styling to
.mainTable ul li:hover li
or something like that. It should override the rule for the parents.
EDIT: Sorry, I didn't fully understand your question. It seems to me that it's impossible to do with css as you would have to apply styling to "a li that has no 'a' descendants", which I don't think can be expressed in css selectors. As a walkaround in order not to use scripts I suggest that you change the background of the link and not the bullet image.
I understand how to change the description of an active <li> element
li:active {
...declarations...
}
But how can I change all the other elements that are NOT active?
For example, all my elements are in bold, but when I select one of them, all the others are changed back to normal.
Thanks!
I'd imagine li:not(:active) should at least theoretically work.
Apply a rule to ALL of them, then apply a different rule to the active.
li {
color: blue;
}
li:active {
color: red;
}
Result: the un-active ones are blue.
After rereading your question, I think the real answer is that you can't use CSS alone to control how the elements behave on user interaction.
I realize that this won't work because the styles are applied immediately, and elements in the DOM are typically not :active by default:
li {
font-weight: bold;
}
li:not(:active) {
font-weight: normal;
}
Plus, :not() is a CSS3 pseudo-class, so support for it is rather poor right now if you have to account for older browsers.
Maybe you can do this with JavaScript (I use jQuery here)...
$('li').click(function() {
$(this).siblings().css('font-weight', 'normal');
});
If I understand correctly this should do it,
li{ font-weight:bold; }
:active li{ font-weight: normal; }
:active li:active{ font-weight: bold; }
So basically you want an active state on the parent which switches everything to normal and then override that for the li that is also active.
To expand Brad's answer based on your example:
You want all <li>'s to be bold, until one is clicked, right? Start off with:
li {
font-weight: bold;
}
Then, if a list item is clicked keep that one bold but make the others regular:
li:active ~ li {
font-weight: normal;
}
The ~ selects all elements that are siblings of the active li, without selecting the active one itself.