1

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

Thomas
  • 8,306
  • 8
  • 53
  • 92
  • If you think that this method isn't very robust and want to find a better way, I recommend getting a css refresher at something like w3 schools. If I understand what you are saying in that you want the properties in #menu to be default, you should just switch the code in the #menu and the table. – oriont Dec 31 '19 at 02:38
  • @oriont sorry I didn't explain well. I don't want the properties in #menu to be default. I want my #menu's table to NOT use properties defined in table{}, without having to override each of them – Thomas Dec 31 '19 at 02:42
  • Why are you using a table for your menu? Use a div with a ul instead, then you don't have to override table styles. If this isn't an option you can create override classes that are specifically named like "no-border". – Nathaniel Flick Dec 31 '19 at 03:33
  • @NathanielFlick I kept my question short but the fact that it is a table or a ul or a div doesn't matter ; I'm looking for a generic way to not have to worry about what I'm doing. (in my case I want to write tables on all my blog posts without having to write a class on them, those style has to be the default, and the menu the exception under its identifier) – Thomas Dec 31 '19 at 06:13
  • Use divs and you won't have to worry about unsetting table styles, you can just use classes. – Nathaniel Flick Jan 02 '20 at 17:45

2 Answers2

2

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!

oriont
  • 684
  • 2
  • 10
  • 25
  • this is in the spirit of what I wanted (and I didn't know about this 'all' selector) however it doesn't work well See for instance the menu in the bottom right (appears after 5 secs) at https://jannaud.fr/guide-pour-passer-facilement-son-site-web-en-mode-sombre-dark-mode-css . It is called #slider in the css, you can easily uncheck in the inspector the rule `#slider, #slider th, #slider td {border: none}` (workaround for the unset) – Thomas Dec 31 '19 at 15:16
  • 1
    I didn't realize that you already had other styling for that table. In that case, what you already had, ```border: none;``` would be the only way to unset the border for that element, as there is no other way to unset it automatically. Sorry! Although I hope this isn't too much of an inconvenience since it is only 1 line. – oriont Dec 31 '19 at 18:45
  • no worries, thanks for checking and thanks for the help. At least it gives a clear answer even if it is impossible – Thomas Dec 31 '19 at 18:51
1

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

  • thanks for the answer. If I understand right: does it mean that I need to add a class "normal_table" to ALL my tables (except the one in the menu)? If so it will be a bit cumbersome – Thomas Dec 31 '19 at 14:58
  • Yeah it should be more effective @Thomas –  Dec 31 '19 at 15:32