CSS :not() selector Topic is solved

Need help with the Administration of your Joomla! 3.x site? This is the spot for you.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
rgtr
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Tue Sep 01, 2009 11:31 am

CSS :not() selector

Post by rgtr » Sat Jul 11, 2020 5:32 pm

Hi

Using Joomla 3.9.19, and Protostar

In my template user.css I have as follows.

.tbl_flowers tr:nth-child(even) {background-color: #c2ddf2;}
this works well

However, another table class tbl_trees has in the last cell of each row a secondary table class tbl_points
the following css works but is ignoring my "not"

.tbl_trees:not(.tbl_points) tr:nth-child(even) {background-color: #dff0d8;}

what happens is that the rows in tbl_points are getting treated as if they are rows in tbl_trees
Viz: if tbl_trees row is selected by nth-child, its tbl_points rows are all coloured but if the tbl_trees row is NOT selected, its tbl_points rows are alternately coloured...

I guess I do NOT know how to use the "not" excluder ... two days of frustration so far !

example is here: http://tdocplus.co.uk/linnpark/index.ph ... find-trees

Thanks
Richard [age 73 !]

 
User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 27008
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: CSS :not() selector

Post by Per Yngve Berg » Sat Jul 11, 2020 6:28 pm

Use the direct child operator (>)

Code: Select all

.tbl_trees>tr:nth-child(even) { 
  background-color: #dff0d8;
}
https://www.w3schools.com/cssref/sel_element_gt.asp

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 351
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: CSS :not() selector

Post by Jaydot » Sun Jul 12, 2020 1:03 pm

Oh my goodness, nested tables...
This is really complicated. And it's nothing to do with Joomla...
But I love a nice css puzzle, so I'll try to answer, even though I don't think I can solve this.

The .tbl_points class is not added to any last cell; it's added to the nested table.
(And by the way, in some cases you have added ".tbl_points" as class, instead of "tbl_points" (no period). I'm not sure what that does, but it might confuse css).

I think your :not is being ignored altogether. It cannot work, because there are no .tbl_trees elements that are also .tbl_points - :not is supposed to check the same element).
What you are seeing is simply css applying the color to all the even rows it encounters anywhere in a .tbl_trees, regardless of whether they happen to be inside a nested table. If a row in .tbl_trees is already green, you just can't see the green it's applying to the .tbl_points rows.
Perhaps you could work around this by giving .tbl_points tables their own stripes; you'd have to use different colors, though, to differentiate from the color .tbl_trees is already using.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

rgtr
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Tue Sep 01, 2009 11:31 am

Re: CSS :not() selector

Post by rgtr » Sun Jul 12, 2020 1:29 pm

Hi
Thanks for your reply ...
I had finally concluded what you say.
Using different colours for the pints is one idea ... but is it practical ...
I like your web site... see tdocplus.co.uk for some of mine - mostly joomla.
Richard

rgtr
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Tue Sep 01, 2009 11:31 am

Re: CSS :not() selector

Post by rgtr » Mon Jul 13, 2020 1:40 pm

Hi

Got the answer suddenly - these posts have helped enormously.

It was a question of refining the selector directing via tbody before tr - thus the following works perfectly.

.tbl_trees > tbody > tr:nth-child(even) {
background-color: #dff0d8;
}

Thanks

Richard

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 351
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: CSS :not() selector

Post by Jaydot » Mon Jul 13, 2020 3:27 pm

Well done!
Why didn't I think of that? :-[
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

 

Post Reply

Return to “Administration Joomla! 3.x”