How to use CSS selectors with Drupal nodes?


I just have a question regarding the CSS selectors for Drupal. I would like to change the color of a div which has no specific ID and tried to use selector such as div[data-quickedit-entity-id=“node/38”] > .class-child > .class-child > .the-div-to-be-changed but i haven’t managed to make it work.

Is there a specific way to do it ?

Thank you very much.


Hi Maxime,

I guess you try to add (S)CSS styling with the CERNOVERRIDE theme. As long as you didn’t change the templates these solutions should work:

Content type based

You can find specific selectors in each Drupal page. For example a node of the content type “Test Content” would always have the class “page-node-type-test-content” in the <body> tag.
On top of that the content should be encapsulated inside an <article> tag which also has the content type’s machine name as a class. In my example this would be the class “test-content”.
In that way you can tie certain CSS selectors to certain content types.

Node based

For a specific node you need to use property selectors. Let’s say you want to select the node with the ID 5.
In the <article> tag you find an “about” property which leads to the node’s system path which in my example would be “/node/5”.
So you could generate a selector like article[about="/node/5"] to select only this specific node.
Your approach with the [data-quickedit-entity-id=“node/38”] doesn’t work because this property is only present if a user with edit right is logged in. Also please note that the quotation marks are wrong in your example. You need the basic ones and not the styled ones.

Let me know if that helps you. :slight_smile:

Hi Patrick,

It worked :slight_smile:

Thank you very much.