This is regarding a list and the double border effect of side by side selected and hovered elements, as pictured here.
Back in the day we called it border collapse because we were using table elements.
Here is the CSS which adds the border (which comes before the next lines in the stylesheet):
li.selected, li:hover {
border: green 1px solid;
border-radius: 1px;
}
I got it working when the hover follows the selected list item:
li.selected + li:hover {
border-top: 1px solid transparent;
}
but this rule for some reason does not apply when the selected item follows the hover:
li:hover + li.selected {
border-top: 1px solid transparent;
}
The idea of these rules are simply that if they appear next to each other, make the top border of the second item transparent.
I checked and it is not being overwritten anywhere, and the two lis are definitely adjacent siblings. This does not work on firefox or chrome.
Does anyone know of any conflicts with using all of these selectors together?
Please let me know if I can add anything else to the post to get a good answer.
You need to set transparent border as default for li.
li.selected, li:hover {
border: green 1px solid;
border-radius: 1px;
}
li {
border: transparent 1px solid;
}
li.selected + li:hover, li:hover + li.selected {
border-top: 1px solid transparent
}
<ul>
<li>dfsafasf</li>
<li class="selected">dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
<li>dfsafasf</li>
</ul>
Related
<nav>
<ul>
<li class="span4">
<a href="/">
<span class="inner">Nav 1</span>
</a>
</li>
I have pipes at the side of each of my nav elements, but they do not extend to the entire height of the nav (only the text).
On rollover the pipe is still visible on the side. it's hard to explain but I have a fiddle:
Fiddle
My question is, what's the best approach, so that when on rollover you hide the pipes from the user?
You could add this to your css, if that is what you need, it hides all pipes when you hover one element:
ul:hover .inner {
border-right: 2px solid transparent;
}
See the fiddle: http://jsfiddle.net/v27DS/30/
Also, if you want to hide the pipes of only the hovered element, try:
.inner:hover {
border-right: 2px solid transparent;
}
See the fiddle: http://jsfiddle.net/v27DS/31/
Try using the sibling combinator to access the previous or next element and make its border transparent.
Read this: http://css-tricks.com/child-and-sibling-selectors/
You can do like this:
nav > ul > li:hover ~ li > a > span {
border-left: none;
border-right: 2px solid black;
}
.inner {
border-left: 2px solid black;
}
nav > ul > li:first-of-type > a > span {
border-left: none;
}
nav > ul > li:last-of-type > a > span{
border-right: 2px solid black;
}
Fiddle
On my page I have a number of listviews.
Some contain a single list item, some contain more than one item. I'm looking for a way to set top/bottom borders depending on number of list items in a CSS only way.
So in a single item list, borders should be:
listitem > border-top & border-bottom
Two item lists
listitem > border-top
listitem > border-top & border-bottom
Three+ item list
listitem > border-top
listitem > border-top & border-bottom
listitem > border-bottom
Right now I have this CSS
.inputList li:not( .inputList li:first-child, .inputList li:last-child) {
border-top-width: 1px;
border-bottom-width: 1px;
}
.inputList li:first-child {
border-bottom-width: 1px;
}
.inputList li:last-child {
border-top-width: 1px;
}
But this doesn't take me very far and I'm using not: which I would rather try to avoid (for lack of IE support)
Any idea if this is at all possible?
Thanks!
All you need is
.inputList li:first-child {
border-top: 1px solid black;
}
.inputList li {
border-bottom: 1px solid black;
}
with that you will always have a border on top and a border on the bottom and in between.
Is there a border-collapse:collapse alternative for lists, where the li's are displayed as blocks with a border of 1px solid.
You can remove the top border on all but the first list item by adding:
li:not(:first-child) {
border-top: 0;
}
http://jsfiddle.net/mblase75/3h8bm/
IE8 and IE7 don't support :not. However, they do support :first-child, so a workaround is easy:
li {
border: 1px solid blue;
border-top: 0;
}
li:first-child {
border-top: 1px solid blue;
}
http://jsfiddle.net/mblase75/3h8bm/4/
IE6 doesn't support either of those, so if you're worried about that browser, you'll have to add a custom class (say, .first-child) to the first element directly.
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;
}
I am trying to replicate the effect I see
Currently I have http://jsfiddle.net/GWkk3/
How can I remove the border between the active li and the 2nd level nav?
Draw the border on the parent <li> elements rather than the child <ul>. Add/change these properties:
.appTabs li {
border-width: 1px 0 1px 1px; /* was 1px 0 0 1px */
}
.appTabs li.active {
border-bottom: 1px solid #EEE;
}
.appTabs li ul {
top: 25px; /* was 24px */
}
And remove this property:
.appTabs li ul {
border-top: 1px solid #CCC;
}
That gets us this far:
Now the inner border just needs to be extended all the way to the right (I'm working on that part).
Make the active tab have 1px extra bottom padding, and have a bottom margin of -1px, so it sits over the line.