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;
}
Related
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);
}
The bootstrap tabs work great, but users want me to increase the thickness of the borders. But, when I increase the thickness from 1px the active tab ends up with a line on the bottom border. I tried increasing the thickness of the bottom border on the active tab, but does not hide the line.
.nav-tabs {
border-bottom: 3px solid #DDDDDD;
/* works with 1px */
}
.nav-tabs > .active > a {
border-bottom: 3px solid #FFFFFF;
/* works with 1px */
}
The following fiddle show the issue : http://jsfiddle.net/jerrykur/FEuC3/
i've amended your jsfiddle, is this what you're after?
.nav-tabs {
border-bottom: 3px solid #DDDDDD;
/* works with 1px */
}
.nav-tabs > .active > a {
border-bottom: none;
position: relative;
top: 3px;
/* works with 1px */
}
http://jsfiddle.net/FEuC3/2/
You can try moving the tab down a bit further so that it will cover the line. This will work so long as the bottom border is not too thick. (You will notice the active tab will not stay in line with the other tabs)
.nav-tabs > .active.active {
position: relative;
top:2px;
}
Adjust the margin-bottom for the active class.
.nav-tabs>.active>a,
.nav-tabs>.active>a:hover,
.nav-tabs>.active>a:focus {
margin-bottom: -3px;
}
You may or may not want to use the :hover and :focus, too.
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;}
I've got the following CSS.less
header.section-header ul {
width: 100%;
list-style-type: none;
li {
display: inline-block;
padding-right: 10px;
.bordered(0,0,0,#compcolor);
margin-right: 10px;
.font-size(12);
color: #compcolor;
}
li:first-child {
.bordered(0,0,0,0);
}
}
This is a simple horizontal list. I wish to turn the border off on the first item, but it's not showing in FF or Chrome. The item appears but doesn't have the specificity. Any ideas?
Edit:
The mixin is
//.bordered(COLOR, COLOR, COLOR, COLOR);
.bordered(#top-color: #bordercolor, #right-color: #bordercolor, #bottom-color: #bordercolor, #left-color: #bordercolor) {
border-top : solid 1px #top-color;
border-left : solid 1px #left-color;
border-right : solid 1px #right-color;
border-bottom : solid 1px #bottom-color; }
0 is not a valid color value. Perhaps you meant transparent?
li:first-child {
.bordered(0,0,0,transparent);
}
(You have to have a zero border width or a border style of none in order to actually disable the border, but it's hard to make out what exactly your .bordered() function is doing.)
I am trying to put a border around a link on hover, and the style applies to it, but it jumps (the element jumps) when i hover over it... what can I do?
code:
.navigation li:hover {
border: 1px solid #ccc;
}
You 'jump' is caused by the 1px height of the border, that make your li move
You might use
.navigation li:hover {
border-color: #ccc;
}
.navigation li {
border: 1px solid #<parentBackgroundColor/transparent>;
}
instead. This way, the border is here from the beginning, so no jump on hovering, and it's invisible, since it's the same color of the parent container or transparent.
.navigation li {
border: 1px solid transparent;
}
You can add a transparent border when you're not hovering, then it won't jump.
Or, you can remove a total of 2px vertical padding around the element, for example:
.navigation li {
padding: 10px
}
.navigation li:hover {
padding: 9px;
border: 1px solid #ccc;
}