Forum:Advanced CSS selector ... is there such a thing ?

Forums: Index → Help desk → Advanced CSS selector ... is there such a thing ?

Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 5270 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.

In either Common.css or Monaco.css ...
Is it possible to construct a class selector that is "qualified" by being the child of some div#uniqueID that is a few levels higher up in the HTML element hierarchy?

Case in point is the HTML generated by the <bloglist> tags:
div.wk_blogs_comments appears in output generate for both the panel/box format and the plain/article format. This target div element cannot have it's own unique ID (indeed there may be many such DIVs just as there may be many blog posts) however, a div element 3 or 4 levels higher up in the HTML hierarchy does have a "qualifying" ID. viz. div#wk_blogs_panel for panel/boxed output and div#wk_blogs_article for plain/article output.

• I appreciate how jQuery can successfully distinguish between the two but I do not know how you can distinguish between the two in a skin_name.css file.

Some user in #wikia IRC claimed it can be done but they vanished before "delivering the know-how"

Is it truth or myth?

my guess is that it's myth ... but I'd love to be proven wrong!

--najevi 16:21, November 12, 2009 (UTC)

Unless I misunderstand you, #wk_blogs_panel div.wk_blogs_comments {} and #wk_blogs_article div.wk_blogs_comments {} should do the trick. The CSS within the brackets will affect all divs with the class "wk_blogs_comments" which are inside the container called "wk_blogs_panel"/"wk_blogs_article". -- Porter21 ^(talk) 16:51, November 12, 2009 (UTC)

I love it when solutions turn out be as simple as this! Thank you, that did the trick very nicely indeed! That relationship among selectors was not obvious from my reading at w3schools Is it safe to assume that this logical-AND operation applies whenever selectors are separated by white space and that logical-OR applies when they are separated by the comma? --najevi 22:34, November 12, 2009 (UTC)

Well, it's not a true logical AND operation, it's hierarchical from left to right. For example, #wk_blogs_panel div.wk_blogs_comments {} will affect divs with the class "wk_blogs_comments" which are inside the container called "wk_blogs_panel", but it will not affect a container called "wk_blogs_panel" which is inside a div with the class "wk_blogs_comments". But aside from that, separating selectors with a space will result in such a hierarchical selection and separating selections with a comma results in the CSS being applied to all of these selections. -- Porter21 ^(talk) 08:52, November 13, 2009 (UTC)

Fair enough, good point. I had assumed as much but did not choose the best words to describe it. I am now wondering if div.c4 div.cG, div.c7 span.cB { style } causes the specified style to be applied to:

1. all div elements using class cG and found in a div.c4 container
2. all span elements using class cB and found in a div.c7 container

I assume: yes. I know that I should test it for myself but I'm in the thick of something else right now.

--najevi 10:42, November 13, 2009 (UTC)

Yes, it would. -- Porter21 ^(talk) 10:48, November 13, 2009 (UTC)