In very simple html/css, I have my menu in a <table id="menu">. The menu has no border, however I would like all the other tables in my blog to have borders.
I made it work this way:
#menu, #menu th, #menu td {border: none; color: red}
table, th, td {border: 1px solid black;}
However this is not very robust. If I add something else to tables I might forget to 'reset' it in #menu. Is there a way to force all properties in #menu so that I don't have to override one by one anything I would add to table, th, td {...}?
I tried the :not() selector but it doesn't feel robust either, I would rather specify what I want for menu on the #menu {...} line, not elsewhere. Let me know if that makes sense or I can reformulate
I think that I understand now. I was searching for a way to unset all values for a css class and came across this page: Reset/remove CSS styles for element only
It tells us that we can do something like this to achieve what you want:
#menu, #menu th, #menu td {
all: unset;
color: red;
}
table, th, td {
border: 1px solid black;
}
Notice how I added the all: unset; and removed the border: none;
This should reset all the styles for elements with that id, but make sure to put your other styles AFTER the all: unset, or else it will unset the styles you just wrote. Hope this helps!
Maybe using classes instead of id's.
If you use a class you can apply a css rule to all elements that have It
So for example to your table you can use
.custum-table
The prevoius class Will apply css styles to all elements
And finally if you wanna apply another css rule you can add another class to your element in this way
Another html file
.custom-table__no--effect
Previous class with BEM Will apply css styles to only one element for example table element
Related
I have a table inside of a table, a really simple one.
What I wanted to do is to avoid having border-bottom of td tag in the last row (tr) of the table. What I did is this:
tbody tr:last-of-type td { border-bottom: none; }
I was thinking that this is it, but then I checked the last row of not nested table and the whole nested table was not having a bottom border. Is there a way to avoid this using simple CSS without classes etc.?
To achieve no border bottom of the nested table, you can do so like so:
tbody table td {
border-bottom: none;
}
Note - the above rule makes assumptions about your CSS, which you haven't shared with us. Due to you not including the CSS that applies the border in the first place, it is possible the above won't work due to CSS specificity.
For example, if your rule that adds border to the table is:
tbody tr td {
border-bottom: [whatever style];
}
Then, the selector you need to use to remove the nested table border is:
tbody tr table td {
border-bottom: none;
}
Add your CSS, and we can more accurately answer your question. Or, better yet - read the CSS specificity article, and you'll know how to alter the selector yourself!
I'd say the simplest way is to use class and id. Like so:
table.outer { some: style; } /* class */
table#inner { some: style; } /* id */
But as you said, AVOID classes, then perhaps call the table nested within the table like so:
table { some: style; }
table table { some: style; } /* override outer table */
I've noticed that the cascade isn't always correct when using polymer custom style. From the looks of it, this could be a bug in the way the cascade is being applied to custom elements, but I'd just like to confirm that I'm not doing something silly.
Consider the following, scoped style, for my custom element:
#price ::content .price span {
display: block;
padding: 4px;
border-top: 1px solid var(--color-gray1);
}
#price ::content .price span:first-child { border-top: none; }
... but once rendered, the :first-child gets overridden by first definition, as you can see in the image below. The only way to ensure that my border: none is applied correctly, is to use !important, which I'd rather not.
I should note that I've seen this behaviour in many other places, and have opted to just use !important as a quick solution, but this starts to feel clunky.
Just adding the image of the rendered element here to show the "incorrect" top border.
From what I’ve understood, the problem comes from the CSS variables/custom properties polyfill.
It adds another class, .product-0 in this case, to scope the property where you use var(--color-gray). You probably figured this also already, but just pointing it out.
You can override that with an equally specific selector (no need to use !important), e.g. #price ::content .price.price span:first-child (notice the duplicate .price).
I don’t know if this can be fixed in the polyfill.
The first declaration is more specific than the second one. This could be the problem.
The Specification of the DOM structure is Major role to override the css.
#price ::content .price span {
display: block;
padding: 4px;
border-top: 1px solid var(--color-gray1);
}
#price ::content .price span more specific than the #price ::content .price span:first-child.
I am trying to change the background-color of rows that contain my found class in a striped bootstrap table. It works for even rows because bootstrap doesn't have a background color for them, but odd rows I am blocked by bootstraps CSS.
Bootstrap CSS:
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
Custom CSS:
tr.found{
background-color:#CECBCB;
}
How would I override bootstrap's CSS for only a single row at a time (as you can see in demo, odd rows are not overridden)?
BOOTPLY DEMO
Write specific selector to override the bootstrap ones
table.table.table-striped tr.found td {
background-color:#CECBCB;
}
Demo
Also, not only specificity matters here, make sure you apply the background to the td element and not the tr because bootstrap is applying to the td element so even if you apply the background to tr won't make sense.
As you said that you wanted the explanation for the selector I wrote, so here it goes, let us break that and understand..
Starting off with this
table.table.table-striped - Over here am selecting a table element having classes .table AS WELL AS .table-striped
Going further with the selector, tr.found we select the tr elements having a class called .found and lastly, we select the nested td elements.
.table-striped>tbody>tr:nth-child(odd)>td,
tr.found{
background-color:#CECBCB;
}
In addition to Mr. Alien's solution, I found that the following works in Bootstrap 4 without explicitly overriding the table style.
tr.found td{
background-color:#CECBCB;
}
Bootply Demo
I have classes like this:
.tableGeneric tr td
{
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.tdValignTop
{
vertical-align: top;
}
When I apply these classes, I expect that a td with class .tdValignTop would be vertically-aligned to the top, even when .tableGeneric tries to align it to the middle. However, it would seem that I am wrong: the table cell would use .tableGeneric's styles instead of .tdValignTop's styles.
Here's a fiddle to demonstrate.
So... why? Isn't a specific class style/selector supposed to override base/parent styles? Is there some kind of logic or reasoning behind this behavior? I assume the behavior is intentional, but I cannot find any documentation on it.
What you think of as “specific” is not more specific in the CSS sense, and it is CSS specificity that matters when applying CSS. The CSS specificity rules define specificity on terms of the syntactic structure of a selector. In this case, the first selector has one class name and two element names, so it is more specific than the other, which only contains a class name.
This is because the first style rule you defined is more specific than the second, thus it will override.
If you do this it will work as you expect:
.tableGeneric tr td
{
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.tableGeneric tr td.tdValignTop
{
vertical-align: top;
}
Working example here.
I have several grids (kendo grids). This have their common style with their hover effect. I want to prevent this hover effect for only one grid, named mygrid.
Tryed this with no success:
.k-grid tr:hover :not(#mygrid)
{
color:White;
background-color:#90B5DA;
}
The correct usage of not is attached to another selector. For example:
.k-grid:not(#mygrid)
Will select all elements with the class k-grid except if the element has an id of mygrid
So what you want is this:
.k-grid:not(#mygrid) tr:hover
Source: http://www.w3.org/TR/selectors/#negation
The already suggested use of :not() is correct. For wider support, you may consider doing something like this, where the :hover state of #mygrid is the same as the "off" state:
.k-grid tr,
#mygrid tr:hover /* Add this rule to the "off" state */
{
color:Grey;
background-color:#333;
}
.k-grid tr:hover
{
color:White;
background-color:#90B5DA;
}