Warning... not the sharpest tool in the CSS toolbox here...
I'm trying to write a tree control using ULs... and stuck on a CSS issue. To simplify the question, I boiled down the example to something that might not make sense, but the essence of the CSS issue is as simple as possible.
Consider this html:
<ul>
<li><div>should be green :)</div>
<ul>
<li><div>should be green :)</div></li>
<li><div>should be red :)</div></li>
</ul>
</li>
<li><div>should be red :)</div>
<ul>
<li><div>should be green !!!!!!!!!!!!</div></li>
<li><div>should be red :)</div></li>
</ul>
</li>
</ul>
and this CSS:
ul li{
background-color: green;
}
ul li:last-child div{
background-color: red;
}
The one item that says:
<li><div>should be green !!!!!!!!!!!!</div></li>
Appears red instead of green!!!!!
Since the div that contains it is contained in an LI that is NOT the last in the list, I expected it to use the normal selector instead of the last-child selector
Here is a fiddle for your reputation point seeking pleasure!
http://jsfiddle.net/dmd1214/5Vm58/16/
You need to use Child selector for selecting the last element(div) of li.
ul li:last-child > div{
background-color: red;
}
JS Fiddle
Make your descendant selector a child selector:
ul li:last-child > div {
background-color: red;
}
That way, it matches only the <div> elements that are children of that last <li> element.
Demo: http://jsfiddle.net/5Vm58/20/
It's because you are targeting a div with your :last-child usage.
ul li {
background-color: green;
}
ul li:last-child {
background-color: red;
}
Fiddle: http://jsfiddle.net/5Vm58/19/
Related
I'm working on CSS and i have a problem with colouring certain parts of a work. For example:
<ul id="nav"><li>cats</li></ul><ul><li>dogs</li></ul>
I want to color the part with 'cats'.
I use
li#nav{color: green;}
to make "cats" green, but it is wrong.
How would that be?
The problem, is as I now understand is, that you want to only color the text and not the dot. For that case this is the solution:
1. So in CSS to achieve green cats and black (default) dot, as asked:
/* if you want to style every <li> element that is inside <ul id ='nav'> */
ul#nav li:first-line {
color: green;
}
or
/* if you want to style every <li> element where the parent is a <ul id='nav'> */
ul#nav > li:first-line {
color: green;
}
2. In case you would like to have green dot and green cat, then remove :first-line
ul#nav li {
color: green;
}
3. In case you would like to have red dot and green cat, then do
ul#nav li {color: red;}
ul#nav li:first-line {color: green}
Note: you can also just use #nav li, instead of ul#nav li, but that will color <li> tag inside <ol id='nav'> and <menu id='nav'> tags too.
Note 2: :first-line is a CSS Pseudo-element (in case you'd like to search for it)
If I'm getting your question correct, then your css was wrong
you need to do this
<ul id="nav">
<li>cats</li>
</ul>
<ul>
<li>dogs</li>
</ul>
#nav li {color:green}
<li class="red">
<p>Home</p>
</li>
In the CSS, I'd like the bg color of the li element to change, BUT the color of the text has to change too. The problem is, even after I hover of ther li element, I have to go further and actually touch the text in order for it's color to change.
I'll be amazed if this can work.
First remove <p> tag
li.red > a:hover {
color: red;
}
li:hover {
background-color: blue;
}
li:hover p,
li:hover a {
color: yellow;
}
There are 2 things you should take into account:
<p></p> is a block level element. It is not used inside inline-element, in this case, <li></li>
Simply make your <a></a> tag to be a block level element.
So your code should be like this:
<ul>
<li class="red">
Home
</li>
</ul>
Then you could come up with the CSS like this:
.red a:hover {
padding: 10px 20px;
display: block;
background-color: #9900;
color: #FFFFFF;
}
I have menu which the active item has an active class on load, which changes its background.
The hover of other items change the background of hovered item.
<ul>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<style>
li:hover, li.active {background:black}
</style>
Is there any way to remove active class background on other items hover in pure CSS. something like:
li.hover .active {background:none}
This works if active is under li, but doesn't work here.
This isn't reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first li can affect the current li.active element with the following CSS:
li:hover ~ li.active {
background-color: #f00; /* or whatever */
}
JS Fiddle demo.
But hovering over the third li cannot affect the same li.active element.
However, the following would work:
ul:hover li.active {
background-color: transparent;
}
JS Fiddle demo.
Try this:
ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:
A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any lis
This worked for me :
.dvchange1 {
color:#fff;
}
.dvOne:hover .dvchange2 {
color:#000;
}
<div class="dvchange1 dvchange2">
<span class="">
Hello
<span>
</div>
I want to style the first list item of a UL, the list item is encased in an <a> tag.
I would have thought it would be simple, just this: http://jsfiddle.net/PHhFX/ but that isn't working.
Anyone any clue?
You're not supposed to encase a <li> in an <a> — in your HTML you can only have your <li> elements as children of the <ul>.
You probably meant to do it the other way around (<a> within <li>), then select
ul li:first-child
jsFiddle preview
It should work like this: http://jsfiddle.net/PHhFX/11/
CSS markup:
ul li:first-child {
border: 1px solid #000;
}
HTML markup:
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
p.s.: you shouldn't wrap <li> elements with <a> elements. Remember, after a <ul> comes a <li>
Hope it helps!
Here you go, fixed your html and css:
Html:
<ul>
<li>AAA</li>
<li>AAA</li>
<li>AAA</li>
</ul>
And css:
ul li:first-child {
border: 1px solid #000;
}
Here is live example in jsFiddle
The HTML5 spec details that the li element may be contained by the following elements:
ol
ul
menu
You'll note that a is not among them.
Link tags are not valid children of lists (<ul> or <ol>) see: Is anything except LI's allowed in a UL?
You must have the links inside the list-items:
<li>AAA</li>
and so:
ul li:first-child a{
border: 1px solid #000;
}
see: http://jsfiddle.net/PHhFX/17/
Use ul a:first-child>li instead of ul a:first-child but this is a hack.
Border is not inherited property.
I have been trying to create a border-color change hover effect with CSS and something seems to not be working properly. Here is my code:
Markup:
<ul>
<li class="hover">
<img src="img/content/lighter.png" alt="lighter"/>
<p>Discusing Strategy</p>
</li>
<li class="triangle"></li>
<li class="hover">
<img src="img/content/wrench.png" alt="wrench"/>
<p>Beginig <br/> Designs & Development</p>
</li>
<li class="triangle"></li>
<li>
<img src="img/content/car.png" alt="car"/>
<p>Delivering Product</p>
</li>
</ul>
CSS:
div#bpath ul li.triangle {
width: 0;
height: 0;
border-top: 95px solid #d0dde5;
border-left: 20px solid #c1c1c1;
border-bottom: 95px solid #d0dde5;
}
div#bpath ul li.hover:hover li.triangle {
border-left-color: #5f9999;
}
What am I doing wrong here? I used the same technique to change the color of the p element and that worked. Why dosen't the border color change work?
Your selector:
div#bpath ul li:hover li.triangle
is trying to match a li element of class 'triangle' within an li. As you don't appear to have a nested list (therefore no li elements within other li elements) this doesn't seem able to work.
If you remove the latter li (li.triangle) to give (all, or one, of) the following:
div#bpath ul li:hover,
#bpath ul:hover li.triangle:hover,
#bpath ul:hover li.triangle,
#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
this might work. Assuming your posted-HTML is correct.
If you want all triangle li's to be changed use this:
div#bpath ul:hover li.triangle{
border-left-color: #5f9999;
}
If you want just the next triangle element it's more tricky but you can try this:
div#bpath ul li:hover + li.triangle {
clear:both;
}
I think this doesn't work on ie. If you want it to work on IE i would go for jquery.
you should use this way,
div#bpath ul li.triangle:hover {
border-left-color: #5f9999;
}
you can use this fiddle, which changes the triangles color and adapt it to clarify your question. http://jsfiddle.net/j7YSu/1/
(or just accept it as the right answer :))
i had some issues with your code, but maybe this fiddle will help: http://jsfiddle.net/j7YSu/3/