I'm styling the page which has consecutive boxes with bottom border except for the last box. I applied class .box for all the boxes and added .box_last to hide the border only for the last box.
.box {
border-bottom-style: solid;
}
.box_last {
border-bottom-style: transparent;
}
However, I realized that the browser is still applying my .box styling. But when I changed the .box_last from transparent to none, the browser overrode the first style and the border is disappeared.
I have searched for a few CSS specificity articles but hasn't got the answer yet. Can anyone explain for me? Thanks in advances.
The reason border-bottom-style: transparent; is not working is because transparent is a color, not a style. This should work fine:
.box_last {
border-bottom-color: transparent;
}
Or without an extra class:
.box:last-child {
border-bottom-color: transparent;
}
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
Trying to override the styles of FullCalendar, but running into some issues.
Within .fc td, .fc th on Chrome, I disabled the border-style attribute, and thus, there are no border attributes for the fc-widget-header. However, I attempted to do this in my CSS using:
.fc td, .fc th {
border-style: none;
}
It did not remove the border.
Next, I am trying to remove the today border:
In Chrome, it meant disabling:
.fc td.fc-today {
/* border-style: double; */
}
I did that in my CSS, and that also did not work.
Wondering what the issue is?
EDIT:
Ok, so I setup a Fiddle to show you guys it didn't work. However, strangely, it worked in my Fiddle: http://jsfiddle.net/46tnzj72/10/ But not in my actual app.
The most probable reason for this issue was due to the CSS priority levels. If any selector having the higher priority then it overwrites your styles, so for this case you need to write the selector with higher priority level.
Otherwise you can simply use the !important with you CSS styles, so it doesn't consider any priority and the important style only applied.
.fc td, .fc th {
border-style: none !important;
}
(or)
.fc td, .fc th {
border-style: double !important;
border-width: 3px !important;
border-color: #aaa !important;
}
Updated Fiddle
I am not sure what you mean by heading but you can remove the border of Today by placing the following code in your CSS
.fc-right > button{
border: none;
}
Update
I just noticed that your border is removed by setting the border of .fc td, .fc th to non but your chrome is loading the cached stylesheet so you have to "Disable cache (while DevTools is open)", to do so inspect your element and click the settings symbol then check the check box beside Disable cache (while DevTools is open).
i hope it will help you
use these scss styles
.calendar-wrapper {
.fc-scrollgrid {
border-color: transparent !important;
}
.fc-scrollgrid td:last-of-type {
border-right-color: transparent !important;
}
.fc-scrollgrid-section.fc-scrollgrid-section-body td[role='presentation'] {
border-bottom-color: transparent !important;
}
[role='row']:last-of-type td {
border-bottom-color: transparent !important;
}
th[role='presentation'] {
border-right-color: transparent !important;
}
}
I'm trying to use CSS currentColor as a border-color to generate CSS triangles using :after content. This works great in all browsers I've tried, except one: Safari seems to be caching the currentColor from the first triangle it generates, and then using that everywhere.
Here's what I'm seeing -- expected behavior from Chrome (and Firefox, and IE9+):
Incorrect behavior from Safari 8.0.4 on Yosemite 10.10.2 (same on iOS 8.2) -- notice all three triangles are red, not the currentColor of their elements:
Here's a fiddle with the full code demonstrating the problem.
The relevant CSS:
span {
display: inline-block;
border-bottom: 2px solid currentColor;
}
span::after {
/* Generate a triangle (based on Foundation's css-triangle mixin) */
content:"";
display: inline-block;
width: 0;
height: 0;
border: inset 0.4em;
/* Safari seems to cache this currentColor... */
border-color: currentColor transparent transparent transparent;
border-top-style: solid;
}
.red { color: #c00; }
.blue { color: #009; }
The HTML is simple:
<div>
<span class="red">Red</span>
<span>Default</span>
<span class="blue">Blue</span>
</div>
Is this a bug in Safari? A matter of interpretation on the CSS spec?
More importantly, any suggestions for working around this? I'd hate to have to explicitly declare the color in separate :after rules for each element. (Using currentColor really simplifies maintenance as our other CSS changes.)
So, this turns out to be an actual Safari bug (which might be fixed soon).
I was able to work around it using this suggestion that border-color defaults to currentColor. Replace this:
border-color: currentColor transparent transparent transparent;
with expanded properties that avoid mentioning currentColor:
/* border-top-color: currentColor; is the default behavior */
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
and the problem goes away in Safari (and it still works in the other browsers).
Even I faced a similar issue, so i have to go with a small js trick.
With this trick we can use the currentColor attribute to be set correctly in the desired elements. but it can be achieved only for normal elements. so i moved the pseudo elements into normal elements.
You have to force safari to redraw elements to achieve this. To achieve redrawing elements simply hide and show it.
var nodeStack =[element];
while (node = nodeStack.pop()) {
if (node.nodeType == 1) {
node.style.display="none";
node.style.display="";
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
Check this simple codepen (Your code with little modification)
and also read this for brief info
Pseudo elements cannot be achieved through this trick. You have to move that into a span or some other element.
Let's say I have a Button with the following CSS style:
Button {
border:2px #eee solid;
border-top-width: 5px;
}
This will generate a button that has a 2px border in color #eee, except the top border will be 5px in thickness.
Now, let's say I have another button that inherits this style, but for this new Button I would like to remove the border-top-width property.
So my question is, how can I set border-top-width to null or to listen to the default border style? The following doesn't work but shows what I'm trying to do:
Button.class-name {
border-top-width: auto;
}
Note that in my situation, I can't just set the value to "2px". I need to remove the value entirely. I've tried "auto", "inherit", "initial", etc... and nothing seems to remove the "border-top-width" property...
Any ideas?
CSS proposes an initial value which would reset it to the default value for the browser.
There is no way (and no proposed way) to set it to the value set by the previous but one rule that set it.
If you want it to take the value from border:2px #eee solid; then you must explicitly set it to 2px.
If you were using a CSS preprocessor, such as SASS, you could use a variable:
$defaultBorderWidth: 2px;
Button {
border:$defaultBorderWidth #eee solid;
border-top-width: 5px;
}
Button.class-name {
border-top-width: $defaultBorderWidth;
}
You could also use this technique with native CSS variables.
You can just use the class to set the width of the button that should be 5px on top:
button {
border:2px #eee solid;
}
button.class-name {
border-top-width: 5px;
}
You can, also, use the :not() CSS selector:
button{
border:2px #eee solid;
}
button:not(.normal) {
border-top-width: 5px;
}
Fiddle
You can use like this if you want your top border-top-width is null;
HTML code
<button>Press me</button>
<button>Hit me</button>
<button class="leave-me">Leave me</button>
CSS code:
button{
border:2px #eee solid;
border-top-width: 5px;
}
button.leave-me{
border-top-width:initial;
}
JSFIDDLE
Eighter you put the border-top-width on your
button.class-name
Or instead of calling that property on the css, try calling it directly on your html.
Or, you can also, on the second button, call
border-top-width:2px;
Im having a problem to determine how to manipulate the Borders for some Tabs
You can see the functionality here on ASP.NET if you are logged-in http://forums.asp.net/user/editprofile.aspx#
You can see for an onClick Event the background-color of the Tab changes to white like its supposed to.
The problem that Im having has to do with the Borders for onClick:
The border-bottom should change from the grey color to white.
The border-left and the border-right should change to the grey color.
Likewise when a Tab is not selected:
The border-bottom should change to the grey color from white.
The border-left and border-right should not have a border.
In my CSS, Im using both the blue and white class for the JavaScript. However I also have: .common-heading-tabs a.selected and this is confusing me.
Here is my Fiddle- if someone could help It would be great
http://jsfiddle.net/NinjaSk8ter/ZSeFA/
I just modified the CSS class for .white a little bit, your CSS mark-up was not the standard:
border-left-color: #A0AFC3;
border-left-style: solid;
border-left-width: 1px;
Additionally, to get the bottom border to go away, you have one of two options, you could do one of either
remove the bottom border from the .common-heading-tabs a class and add it to the .blue class
add border-bottom-color:white !important; to the .white class
The reason that you were seeing the behavior that you were was because the standard tab had a border (from .common-heading-tabs a), and when you switched to white, you tried to change the color or some of the borders, but you used border-left-color-value rather than simply border-left-color, and then you didn't modify the border on the bottom on the tab for the white class, hence either moving the bottom border declaration out of .common-heading-tabs a or explicitly coloring the bottom-border-color:white !important
Hope that helps!
Edit:
You requested having a border run between the tabs, if you were to modify the class .left-col and add to it:
.left-col
{
border-bottom-color: black;
border-bottom-width: 1px;
border-bottom-style: solid;
}
That should do the trick, maybe you should get rid of the borders on the other tabs, if this is what you're looking for, because the double border looks funky.
Let me know if I can help any more
For an example to make bottom border white look this
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-bottom-color:white;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
You have some inheritance going on. Adding explicit values to the .blue class and important to the one in .white worked.
.blue {
background-color: #D7DFEA;
border-bottom: 1px solid #fff;
border-top: none;
border-left: none;
border-right: none;
}
.white {
border-bottom: 1px solid #fff !important;
border-top: 1px solid #A0AFC3;
border-left: 1px solid #A0AFC3;
border-right: 1px solid #A0AFC3;
background-color: white;
}
The problem, as far as I can see, is that while both .common-heading-tabs a and .white are applied to the link, the former is the "more specific" CSS class, which means the browser gives it precedence while determining which styles to apply.
If you want to make sure the .white style overrides the border, you can either add !important to the border style:
.white {
background-color: white !important;
border-bottom-color: #FFFFFF !important;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
...
}
or redesign the appliance of your classes in such a way that conflicting border styles aren't applied to begin with, which in your case could for example mean moving the blue border style from .common-heading-tabs a to .blue.