I need to know how to make a borders between my items like the following image:
I tried making it using border-right and -left but the last item shouldn't have a border-right.
My CSS:
border-top: 1px solid #000;
border-right: 1px solid #000;
How can I apply border-right to all but the last element on the row?
There is a better way to do it that works in older browsers: http://jsfiddle.net/mxV92/.
You simply apply a border on the left for every item that immediately follows another item:
ul > li + li {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #bbb;
}
If I understand correctly, what you want is to have borders on the right of all the items, except the last item.
You can use the 'last-child' selector for that. For example, if your objects were in a 'div' with the class 'foo', your CSS might look like:
div.foo {
border-width: 1px 1px 0 0;
border-color: #000;
border-style: solid;
}
div.foo:last-child { border-width: 1px 0 0 0; }
This says that divs of class 'foo' should have solid black borders, with a width of 1px on top and right ('border-width' is followed by widths in the order top, right, bottom, left), except on the last item, where the width is '1px' only on the top.
':last-child' should be supported by most modern browsers.
add this to your style.css, turn off border-right every 4th books. (this only works on the desktop version of the site.)
.nspArt:nth-child(4n) .gkResponsive img.nspImage {
border-right: none;
}
You can do this:
.books-collection {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px 0;
}
.books-collection .book:not(:first-child) {
border-left: 1px solid #bbb;
padding: 5px 0;
}
Related
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
How can I make the border only appear on the top when I hover over it?
Code:
a:hover {
border-top: 3px white;
border-style: solid;
}
It makes the border still appear on all sides, but I want it to appear only on top.
You can also use:
a:hover {border-top: 3px solid white; border-right: 0; border-bottom: 0; border-left: 0;}
If the regular state of your link uses all four borders, then use 0 for the right, bottom, and left borders if you want only the top border on :hover.
a:hover {
border-top: 3px white;
border-style: solid;
border-bottom: 0px white;
border-right: 0px white;
border-left: 0px white;
}
Fixed it. Only appears on the top now. :)
Please try the below code.
border-style: solid;
border-top: thick double green;
border-left:0;
border-bottom:0;
border-right:0;
I think when you use solid it draws border on al sides. The above code will actually get rid of the border from all three sides but not the top.
.myclass {
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
Is it possible to group properties that share a common definition, such as border-top and border-bottom in the example above.
Something like:
.myclass {
border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
background: #F2F2F2;
}
TIA,
You can using LESS or SASS (I believe), but if you don't want to use those, you can instead group selectors that will have the same property:
.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
{
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
This will apply the style to all the elements.
Unfortunaly border doesnt have a shorthand version (Like say margin/padding for example), it has to be the same for all, or different.
However what you can do - is say you want to style one side uniquely, is specify all of the box, then underneath it, override it with an individual style. Heres a little fiddle of what I mean.
http://jsfiddle.net/XxWwn/
I think I see what you're trying to do here,
This is the only border shorthand I know, without using SASS/LESS.
.myclass {
border-color: red blue green coral;
border-width: 1px 2px 3px 4px;
border-style: solid;
}
This the same shorthand as margins and padding (TOP, RIGHT, BOTTOM, LEFT)
I often find myself into this:
.class {
border-top:1px dashed #0000000;
border-bottom:1px dashed #0000000;
}
Is there a way to one-line that?
I tried this but doenst' work:
.class {
border:1px 0 dashed #0000000;
}
No but you could make it simpler to maintain by using:
.my_class {
border: 1px dashed #000;
border-right: none;
border-left: none;
}
That what you only need to change one line.
You can use properties for every "side" (top, right, bottom, left) for each single border property, in your case:
.class{
border-color: #000;
border-width: 1px 0;
border-style: dashed;
}
Note that you can specify every property for every side, for example:
.class{
border-color: #000 green blue yellow;
border-width: 1px 2px 3px 4px;
border-style: dashed solid dotted solid;
}
Nope, there's no one-liner for that in pure CSS - you can use the border shorthand only for all four sides at once.
my following css code does not work in msie.
#block a {
border-right: 2px none #eee;
border-bottom: 2px none #eee;
}
#block a:hover {
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
}
In msie, only the right border will be displayed correctly. The bottom border is totally invisible. Other browsers work fine.
can anybody help me, to make it display correctly in msie as well?
demo website is http://mmjd.com (mouse move over the text on the very right side)
The anchor in question is being displayed inline. IE does not recognise the full width and height.
Setting display:block; resolves this.
#block a {
border-right: 2px none #eee;
border-bottom: 2px none #eee;
display:block;
}
#block a:hover {
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
}