Is there any way to specify with CSS to disable a left-border to the right of a cell with a certain class?
As you can see in this image the border to the right is double, it has the border of class "selected" plus the default gray border. I want the "selected" cell's right border to override the neighboring cell's left-border somehow.
FWIW, I think this is because of the table's CSS where I have commented 'border-collapse'. I need to do this otherwise I can't have rounded corner's on the table.
.ui-tabs-panel td { /* default table cell */
border-bottom: 1px solid #E9EBDF;
border-left: 1px solid #E9EBDF;
padding: 7px 7px;
font-family: Tahoma;
cursor: default;
background-color: #FAFDFF;
}
.ui-tabs-panel td.selected { /* when selected */
border-right: 1px solid #94DFEB !important;
border-left: 1px double #94DFEB !important;
background-color: #FFF !important;
color: #087DBD;
}
It seems, the current extra border belongs to the next <td> element, Try this to clear the border:
.ui-tabs-panel td.selected + td {
border-left: none;
}
You can select the next sibling element by Adjacent sibling combinator
element1 + element2 Selects every element2 element that are placed immediately after element1 element(s). They're siblings.
Related
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>
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;
}
EDIT3:
http://jsfiddle.net/ZgTHa/
Basically I have a table with an 1px solid grey border containing a radio button in each row. I apply an 1px red border on the row which is selected via the radio button. The color doesn't change. But if I set the red border to 2px, it changes.
I think this has to do with some priority issues, meaning that if both borders are 1px and both are solid, the td applies, if the td border is dotted, then the solid one applies for the chosen row. same situation if the selected row has a larger border width then the td.
I think this is just how it is in css (I might be wrong and missing something here) but I was wondering how one can work around this issue with relative ease (I could set a background image and put no borders and such, but that seems drastic)
edit (an example of what I'm trying to say):
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-collapse
if you add a "red-border" class on one of the tr like so:
<tr class="red-border">
and specify the red-border class style like so:
.red-border {
1px solid red;
}
it doesn't apply. But if you add:
.red-border {
2px solid red;
}
it does apply. same goes if you set the td border to dotted:
table, td, th
{
border:1px dotted black;
}
and keep the red border as 1px solid red, it does apply.
ill just work around it with styling the tds with specific classes which get added on the click event. I'm just curious if this is how its intended to work or am I missing something?
edit2:
i have applied the styles like so:
.red-border {
background-color: #fbfafa !important;
color: #571c20;
.first {
border-left: 1px solid #571c20 !important;
border-top: 1px solid #571c20 !important;
border-bottom: 1px solid #571c20 !important;
}
.second {
border-top: 1px solid #571c20 !important;
border-bottom: 1px solid #571c20 !important;
}
.third {
border-top: 1px solid #571c20 !important;
border-bottom: 1px solid #571c20 !important;
}
.fourth {
border-top: 1px solid #571c20 !important;
border-bottom: 1px solid #571c20 !important;
border-right: 1px solid #571c20 !important;
}
}
it still doesn't apply sometimes. It applies well for the first row, on the second row the top border doesn't apply, same for the third row. On another table the right border doesn't apply.
Not all styles will work for tr elements, like border for instance
tr
You can however easily style the table element or the td elements.
If you want a border add it to the tds.
Example:
http://jsbin.com/avihuc/1/edit
td {
border:solid black 1px;
}
If you want higher "priority" (its actually called specifity)
use something like this:
table tr td {
}
wins over
tr td {}
As a rule of thumb for specifity,
ID selecotrs are worth 100 times more than elements selectors. Classes are worth 10 times more than element selectors.
!important is super specific and can be used as a last resort.
seems i have found the anwser:
.red-border {
border: 1px double red;
}
im guessing the double style resolves the conflict between the tr and td borders.
There is another way to accomplish what you want. Instead of setting style for tr you can set styles for tr's children elements — td's. Since you've got classes for the first td and the last one, you don't even have to use pseudo-classes for that. For example left border looks like that:
tr.red-border td.first {
border-left: 1px solid red;
}
Here is the complete example: http://jsfiddle.net/htn1cjoq/. I didn't change your html, only the css part. Hope it helps.
.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 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.