I have a style rule:
.tabs li {
border: 1px solid transparent;
}
.tabs li:not(:last-child):not(:nth-child(2)):hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
which should change the color of the li's background and border for all elements except second and last element when you mouse over them. But somehow it works for all li elements. What CSS rule should I use?
UPD
saNiks's answer helped me to find a solution. Here is what css code should looks like:
.tabs li {
border: 1px solid transparent;
}
.tabs li:hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
.tabs li:last-child:hover, .tabs li:nth-child(2):hover {
background-color: transparent;
border-color: transparent;
}
You need to rewrite your styles to use the :not selector in applying your desired default style as follows
.tabs li {
border: 1px solid transparent;
}
.tabs li:hover {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
.tabs li:not(:last-child):not(:nth-child(2)):hover {
background-color: transparent;
border-color: transparent;
}
Working JSFiddle Code here
You can add a class for the specific <li> tag that you want to change, for example:
<li class="some_class_name"> Some content</li>
and than to add style to this <li> by
.some_class_name{...
\\your style goes here}
Why not just do this? If the second item "AND" the last item is to be styled,
.tabs li:hover:not(:last-child):not(:nth-child(2)) {
background-color: rgba(132,141,149,0.05);
border-color: rgba(228,230,232,0.25);
}
Related
I've added book-table class for the last menu item and tried to customize it. The main trouble is that hover works default mode works but when it's active and you are locating on that specific page active color doesn't work. It extends default active link color which is for other menu items. Here is the code:
.book-table {
background-color:#e67e22;
color: #ffffff;
border: 2px solid;
border-color: #e67e22;
line-height: 3.5;
border-radius:40px;
padding-left:10px;
padding-right:10px;
}
.book-table:hover {
background-color: #ff8214;
border: 2px solid;
border-color: #ff8214;
line-height: 0;
border-radius:40px;
padding-left:10px;
padding-right:10px;
}
.book-table a:hover,
.book-table a:focus,
.book-table a:active {
color: #222222 !important
}
.book-table > li > li.current-menu-item > a {
color: #fff
}
Is there any way to change active color only for this latest menu link?
I have this style for the opencart category menu:
#menu .dropdown-inner a {
border-bottom: 1px solid #1f90bb;
}
And I am trying to remove the bottom border:
#menu.dropdown-inner a li:last-child {
border-bottom: none;
}
But it's not working. Please help!
JS Fiddle Example
Change your second style so that the a is inside the li:
.... li:last-child a {
border-bottom: none !important;
}
I'm using a CSS triangle to create a navigation arrow. Here's the stripped-down example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Triangle</title>
<style>
.nav {
width: 150px;
background-color: #cccccc;
font-size: 22px;
padding: 5px 0px;
text-align: center;
}
.nav a:link, .nav a:visited, .nav a:active {
text-decoration: none;
color: #000000;
}
.nav a:hover {
color: #ff0000;
}
.arrow-right {
display: inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 12px solid #000000;
}
.arrow-right:hover {
border-left-color: #ff0000;
}
</style>
</head>
<body>
<div class='nav'><a href='http://example.com'>Next <div class='arrow-right'></div></a></div>
</body>
</html>
If you mouse-hover on the arrow, both the text and the arrow turn red, as expected. But if you mouse-hover only on the text, only the text turns red. Is there a reasonably simple way to "couple" these in the CSS, so that hovering on either produces the color change? I don't want the entire box to be an anchor - just the text and the arrow.
(I've also used some UTF-8 characters to make the arrows, but that triggers some interesting font-rendering problems on a Mac. Using » and « is appealing, but the lack of good "up" and "down" entities makes that one kind of a non-starter. Using images is out, because I need complete color flexibility.)
Change:
.arrow-right:hover {
border-left-color: #ff0000;
}
to:
.nav a:hover .arrow-right {
border-left-color: #ff0000;
}
DEMO 01 - Coupling anchor and element border
or if you want to combine them by changing :
.nav a:hover {
color: #ff0000;
}
to:
.nav a:hover, .nav a:hover .arrow-right {
color: #ff0000;
border-left-color: #ff0000;
}
and remove this completely:
/* remove this */
.arrow-right:hover {
border-left-color: #ff0000;
}
DEMO 02 - Couple anchor and element border
Try the hover selector on the nav as follows:
nav:hover a, nav:hover .arrow-right{color: red;}
Also, for the sake of best practice add the focus selectors too:
nav:hover a, nav:focus a, nav:hover .arrow-right, nav:focus .arrow-right{color: red;}
Apologies for what is probably quite a basic question, but I've not found a solution to this online.
I have a simple CSS menu, here's the CSS:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
opacity:1;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/* End navigation bar styling. */
This is from an online tutorial, so not my code.
Here's the HTML:
<!-- language: lang-html -->
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
All I want to do is have different colo(u)rs for each menu item when hovered over.
I assume you need to create a separate id (or class) for each item, but I am unsure of the syntax and no matter what I try it simply won't work.
Many thanks for any assistance.
add a class to the href links and then in your css call the hover state and then style accordingly. Here is an example using your code: http://jsfiddle.net/LGL37/
The HTML:
TEXT
The CSS
.about:hover { background: yellow; }
EDIT: this is a much better solution than the other answer as it is cross browser compatible and if you need to style more in the future you'll have individual classes to target rather than nth which can get confusing.
If you don't use the :nth-child() selector, you can add a unique class to each li in the nav
<li class="about"></li>
and set a hover effect in your stylesheet for that specific class
#nav li.about a:hover { background-color: red; }
You can use :nth-child selector but it won't work in some legacy versions of IE.
JsFiddle
#nav li:nth-child(1) a:hover {
color:green;
}
#nav li:nth-child(2) a:hover {
color:blue;
}
etc.
You could use nth-child:
li:nth-child(2) a:hover{
color: red;
}
http://jsfiddle.net/fAbFg/
This example affects the second item.
I have the following problem, i need the "ul[editable] li" class to be dominant over "#menu li". I know I can use !important as follows:
#menu li {
border:solid 1px #9f693a;
outline:solid 1px #89552a;
background:url(images/bg.png);
}
ul[editable] li {
background-color: #333333 !important;
border-color: #0d0d0d !important;
color:#fff !important;
}
I want to say something like this:
ul[editable] li !important {
....
}
Is there a way to do this?
Thanks!
Nope, you cannot use the !important statement in the selector. The only thing you can do is make the second selector more specific, (Or the first one less specific of course).
For example:
#menu li {
border:solid 1px #9f693a;
outline:solid 1px #89552a;
background:url(images/bg.png);
}
#container ul[editable] li {
background-color: #333333;
border-color: #0d0d0d;
color:#fff;
}
I guess you already knew this though. :)