<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;
}
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I was trying to create a responsive menu but selecting a specific element worked out differently.
For example, when I selected "nav ul li" for list styles in the default size and selected "ul li" for list style in the breakpoint, it didn't work as I intended.
It was fixed when I selected "ul li" for both the default size and the breakpoint but I don't know why it fixed the issue because as far as I know, selecting "nav ul li" and "ul li" are the same thing. Could somebody help me with this?
nav {
width: 100%;
background-color: darkblue;
}
ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 20px;
}
ul li:hover {
background-color: orange;
}
ul li a {
color: #ffffff;
text-decoration: none;
}
.toggle {
width: 100%;
padding: 10px 20px;
background-color: #001f44;
text-align: right;
box-sizing: border-box;
color: #ffffff;
font-size: 30px;
/* to hide toggle */
display: none;
}
/* Break Point for the toggle */
#media screen and (max-width:768px) {
.toggle {
display: block;
}
ul {
width: 100%;
}
ul li {
display: block;
text-align: center;
}
}
<div class="toggle">
<i class="fa fa-bars"></i>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
</ul>
</nav>
You are running into specificity issues. In CSS, if two different rules target the same element with same attributes, the rule with the more specific selector will win and cancel out the less specific rule.
Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
nav ul li {/* more specific rule wins */
color: blue;
}
ul li {
color: red;
}
<nav>
<ul>
<li>The first list example</li>
</ul>
</nav>
<nav>
<ul>
<li>The second list example</li>
</ul>
</nav>
What is happing is that you are not overriding your selection in the media query.
For instance lets say you got:
CSS:
p a{
color: red
}
#media screen and (max-width:768px) {
a {
color: blue;
}
}
html:
<p> <a>Some Url </a> </p>
The media query wont override the selection for is not as specific as the prior selection.
CSS is about priorities for the more specific the higher the priority of style.
So as:
p a { some style} is more specific than a {some style} then the priority stands for the first one.
In your example, ul li is less specific than nav ul li, thats why you are not overriding the style with the media query.
Hope this answer your question.
Go to w3schools.com for CSS selection rules.
CSS is easy to start writing and really hard to maintain.
One approach to simplify maintainability and avoid specificity conflicts is BEM (Block, Element, Modifier) in which every element has a class and that class describes the element as either:
a Block
a Block Element
a Modified Block
a Modified Block Element
Eg.
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">The first list example</li>
</ul>
</nav>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">The second list example</li>
</ul>
</nav>
This will help you entirely avoid any specificity conflicts.
N.B.
BEM is just one approach to writing CSS. Others which similarly seek to simplify maintainability and extendability are OOCSS and SMACSS.
You will find on the web nearly a decade's worth of blog posts and tutorials on any of these approaches to writing CSS.
When I am focusing on link a elements then the only font size is not changing bt I want to change the font size whenever I focus on link a elements of html code...
CSS:
a:focus {
outline-color: ;
background-color: aqua;
font-size: 27px;
}
HTML:
<ul>
<li>home</li>
<li>h</li>
<li>m</li>
</ul>
You probably want to use hover or active. The outline color with nothing might also be causing a syntax error.
Hover changes the element when you are over it. Active changes it when it is the current element that is about to be activated.
a:hover, a:active {
background-color: aqua;
font-size: 27px;
}
Not sure what is problem? When I replicate youre code its work just fine. Try adding '#'(dummy-link) to links href attribute
<ul>
<li>home</li>
<li>about</li>
<li>Contact</li>
</ul>
a:focus
{
outline-color: none;
background-color: aqua;
font-size: 27px;
}
I constantly fail to prevent a submenu item from inheriting the color of a top item. I know that similar questions have been asked already but am sorry to not be able to solve my problem using them.
CSS:
.Topmenu a{
color:black;}
.Topmenu.update a{
color:blue;}
.Submenu a{
color:black;}
Now the Menu itself looks like this:
<div id='Mainmenu'><ul>
<li class='Topmenu update'><a href='Link1'>Link1</a><ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul></li>
Now the submenu Link still is blue. What am I doing wrong?
Edit: Sorry for the confusion, it's a 2D-Menu, the Main Menu(Topmenu items) is horizontal with vertical Topmenu's (Submenu Item).
It is because of specificity. The .Submenu class is overwritten by .Topmenu.update. To avoid this, put .Topmenu.update in front of the .Submenu class.
.Topmenu a {
color: black;
}
.Topmenu.update a {
color: blue;
}
.Topmenu.update .Submenu a {
color: black;
}
<div id='Mainmenu'>
<ul>
<li class='Topmenu update'><a href='Link1'>Link1</a>
<ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul>
</li>
</ul>
</div>
The problem is from your css. it should look like this;
.Topmenu a {
color: black;
}
.Topmenu, .update a {
color: blue;
}
.Submenu a {
color: black;
}
Notice the second block has a comma and space after the first class.
Although your HTML does have an error, it should still not affect the CSS from working right. and yes you have to fix your html it does not look right. so fix from #zowie's correction.
Let me know.
Use > for the first level:
.Topmenu a{
color:black;
}
.Topmenu.update > a{
color:blue;
}
.Submenu a{
color:black;
}
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/
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/