How can we apply CSS to all pages except for one containing the "howto" placeholder?

Hey, we're dealing with multiple pages that require CSS styling.

.cms-index-noroute .col-main .std {font-weight: bold}
.cms-index-list .col-main .std {font-weight: bold}
.cms-index-view .col-main .std {font-weight: bold}

We'd prefer to simplify the CSS like this:

.col-main .std {font-weight: bold}

However, there's a problem as it impacts the entire page when using the selector:

.cms-index-index

Question: Is there a way in CSS to apply 

.col-main .std {font-weight: bold}
to all pages except for those containing .cms-index-index?

csscss-selectors

Answer №1

To style elements within a specific parent element, you can utilize the :not() selector along with the child combinator. If we consider that .cms-index-index serves as the parent of .col-main, the CSS would look like this:

:not(.cms-index-index) > .col-main .std {
    font-weight: bold;
}
<div class='cms-index-noroute'><span class='col-main'><span class='std'>Span 1</span></span></div>
<div class='cms-index-list'><span class='col-main'><span class='std'>Span 2</span></span></div>
<div class='cms-index-view'><span class='col-main'><span class='std'>Span 3</span></span></div>
<div class='cms-index-index'><span class='col-main'><span class='std'>Span 4</span></span></div>

Answer №2

Take a look at this code snippet:

.container .box {
    background-color: red;
}
.page-home .container .box {
    background-color: blue;
}

CSS rules with higher specificity will take precedence over less specific ones.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to implement a Datepicker in the date column of a table created using HTML and JavaScript

I am encountering an issue while creating a table in html and javascript. I am unable to use a Datepicker in the date column when inserting a new row, even though it works fine when using in normal html code. Below is the javascript function: //Script fo ...

javascriptphpjqueryhtmlcss

Switching Bootstrap Navbar Active State with JavaScript

I have encountered an issue with using the "active" class on my navbar navigation items in Bootstrap 4. When I click on the links, the active state does not switch as intended. I have tried incorporating JavaScript solutions from similar questions but have ...

javascripthtmlcsstwitter-bootstrap

Styling for main banner image on large desktop screens and mobile devices

I need help with website design and CSS solutions. Currently, I have a WordPress website with a onepager theme. At the top of the page, there is an image that almost fills the screen along with a title. My concern is how this image behaves with different b ...

htmlcssresponsive-design

Personalize the width of the columns

My SharePoint Online HTML code is as follows: <div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Responsable" ctxnum="14" displayname="Responsable" fieldtype="User" ...

jqueryhtmlcss

.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule. Here is a URL example where I have experimented with .htaccess: http://example.com/test/home This used to be: http://example.com/test/index.php?p=1 My goal is to redirect ...

css.htaccess

Create a sleek transition for your Bootstrap 4 fixed Navbar by having it smoothly slide down and change to a

Throughout my experience with HTML/CSS, I have predominantly relied on themes that included this feature by default. However, as I now venture into building from scratch, I find myself struggling to recreate it. You'll notice that I have a stylish fi ...

javascripthtmljquerycssbootstrap-4

Embed a video within an image while ensuring it remains responsive on all devices

I have a picture that resembles something like this one My goal is to embed a video into it while maintaining its aspect ratio when the screen size is reduced. The responsive design should only affect the width since the image will be displayed in portrai ...

htmlcssimagevideoresponsive-design

What are some strategies for ensuring that Plotly JS can adapt its height and width to fit the entire div dynamically, without relying on fixed pixel dimensions?

Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked? This code snippet demonstrates a high delay: var z = [], steps = [], i; for (i = 0; i < 500; i+ ...

javascripthtmlcssplotlyplotly.js

Choose and activate a button using a CSS selector in Selenium with C#

Can someone guide me on how to select and click a button on a webpage using Selenium? The specific source code I am referring to is shown below: <span class="login-bt"> <a href="#" onclick="return sChangeURL('GB2101_KAIINLOGIN','h ...

c#seleniumcss-selectors

Is there a way to ensure the content of two divs remains aligned despite changing data within them?

Currently, I have two separate Divs - one displaying temperature data and the other showing humidity levels. <div class="weatherwrap"> <div class="tempwrap" title="Current Temperature"> ...

javascripthtmlcss

Prevent image element from overflowing in HTML

How can I prevent the images on the right from extending beyond the right padding? I want the fourth image to align with the red block above it. https://i.sstatic.net/KUE62.png Does that clarify things? <div style="margin: 0 15px;height: 40px; back ...

htmlcssimage

Vuetify Container with a set maximum width that remains fixed

I recently started developing a web application using Vue.js and Vuetify (https://vuetifyjs.com/en/). Currently, I have a basic layout with 3 columns. However, I noticed that the width of these columns is restricted to a maximum of 960px due to some defau ...

cssvue.jsvuetify.js

How can I customize the hover effect of the drop-down options <option> to have a "blue" background color?

I've been struggling to change the default blue background color of the drop-down options when hovering over them with the mouse. Despite trying various solutions from this forum, nothing seems to be working at the moment. (These solutions used to wor ...

htmlcsstwitter-bootstrap

Which is better for creating hover effects: CSS3 or JavaScript?

When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code: <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> ...

javascripthtmlcss

Having trouble getting JavaScript to replace tags in HTML

I've been working hard to replace all the shared code in posts on my website, but I'm having trouble getting it to work. I want everything inside <pre><code></code></pre> tags to be colorized using CSS. Here's a sampl ...

javascriptjqueryhtmlcss

The content spilling out of a Bootstrap 4 row

UPDATE: Here is the link to the javascript fiddle When the text on the screen becomes too large for the row, it overlaps onto other rows instead of increasing the height of the row. This could be due to setting the row heights as a percentage value in ord ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

What seems to be the issue with Collapse.js in Bootstrap 3.3.4 on this page?

I am currently utilizing Bootstrap version 3.3.4. All of my resources are linked relatively and the HTML file is in the correct location for access. I am creating a 'Learn More' button that should display a collapsed unordered list either above ...

javascripthtmlcsstwitter-bootstrap

Show a directional indicator on hover in the date selection tool

I am currently using a datepicker that looks like this: https://i.sstatic.net/XsrTO.png When I hover over it, three arrows appear to change days or show the calendar. However, I would like to remove these arrows. Here is the code snippet: link: functi ...

javascriptjqueryhtmlcssdatepicker

Overflow scrolling container with additional space to the right of an image

I am currently working on a project that involves a specific website. When examining the main battalion image, I noticed there is an excessive 300px of whitespace on the right side that I am struggling to remove. There is no hidden content or padding caus ...

htmlcssscrolloverflow

Using CSS3 animation when adding a class, rather than on page load

I am trying to trigger my keyframe animations when the .show class for the popup window is added through JS, but currently the animation only activates upon page load. This is the JavaScript code I have: <script type="text/javascript"> $(document) ...

jquerycssaddclasscss-animations