Utilizing CSS for a Single Page

I'm looking for a more efficient way to apply CSS to the masthead on all pages except the homepage in the Wordpress Twenty Sixteen theme. Currently, I am manually targeting each page like this:

.page-id-24 #masthead {
padding: 5%;
background-image: url(...);
background-size: 1400px 500px;
height: 10px;
margin-bottom: 5%;
}

.page-id-14 #masthead {
padding: 5%;
background-image: url(...);
background-size: 1400px 500px;
height: 10px;
margin-bottom: 5%;
}

Is there a way to write something similar to #masthead not:(home) {...} to speed up the process and modify the masthead on all pages except the homepage?

Thanks,

Jack

Answer №1

Greetings from StackExchange!

Thank you for mentioning that "Twenty Sixteen" is your theme. I took a look at a demo of your theme on wordpress.org and found a suitable selector for your needs. Here is the recommendation:

body:not(.home) #masthead { /* Stylish */}

This selector should meet your requirements.

http://codepen.io/anon/pen/LZGmLV

The :not() selector functions as a pseudo class that can negate a simple selector. In this scenario, we are targeting an element (specifically, your <header> element) with the "masthead" ID that is present only on the home page. This selector allows us to exclude it from our styling.

.

For more information, you can check out the following resource:

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

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

Did my code effectively block an XSS attack?

Recently, I was informed that my website has vulnerabilities to XSS attacks. In an effort to improve security, I have implemented the htmlspecialchars method as a preventive measure. Here is the function I created: function _e($string){ return htmlsp ...

Modifying the Collapse Direction of Navigation in Bootstrap 4

Is it possible to change the collapse direction of the Bootstrap 4 navbar from 'top to bottom' to 'right to left'? Here is the code snippet I am currently using: <nav class="navbar navbar-light bg-faded"> <button class="na ...

Mastering the Art of Utilizing Box Component Spacing Props

Easy margin and spacing adjustments are possible with the help of Material-UI. They provide shortcuts that eliminate the need to individually style components with CSS. In the code snippet below, it's important to note that specifying the measuremen ...

How can I center <text> within a button using Vue Native?

Is there a way to position the "login" text in the center of the button? I've attempted using align-items: center; and justify-content: center;, but it doesn't seem to be working https://i.sstatic.net/XVHWA.png <template> <view cla ...

Transfer the document to the server using ajax

I've been attempting to upload an image to the server using the following simple code: <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress ...

What is the ideal location for storing my CSS files?

I have a medium-sized website that shares a common header/footer, and each page has its own specific layout file. The common header/footer is stored in a separate html file, but I am struggling with where to place the CSS file because the link element in f ...

Images are not displayed when utilizing font-awesome on a MVC 5 website

I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBund ...

The implementation of a fixed navbar using Javascript is encountering issues

is the site and it's currently being built using wordpress. The navigation bar is located within the <header> section, along with my logo at the top, so I'm not sure if that could be causing any issues. This code snippet includes the HTML ...

Maintain the appearance of the selected hyperlink

Currently, I'm working with a list of links that are dynamically called using PHP. Whenever these links are clicked, the page refreshes to load the content of the link. However, my goal is to keep the link styled in the same way as when it's hove ...

Is Selenium Webdrive the superior choice over direct requests?

My goal is to extract verification sentences from Facebook pages using BeautifulSoup. The specific sentence I am looking for is "Verified PageFacebook confirmed this is an authentic Page for this public figure, media company or brand." I tried parsing the ...

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above. Here is my implementation. Please review my JSFiddle. HTML: <table border="0" id="cssTable"> <tr> <td>eredgb</td> <td><a href="self">0 ...

Reveal or Conceal Information Based on Scroll Location

Can anyone help me recreate the interactive effect seen in the blue circles on ? When scrolled into view, the content within these circles changes to reflect the post being focused on. I'm specifically looking for guidance on how to implement this us ...

Modify the line graph's color according to the data, displaying red for values above a certain threshold (such as 0) and blue for values below 0

I am currently tackling a challenge involving displaying a graph that corresponds to the temperature of an object. My objective is to highlight sections of the line graph in red when the object's temperature is above 0, and in blue when it falls below ...

Placing an Image in Next.js

I've been trying to position my image all the way to the right of the page using CSS properties like position: absolute and right: 0. I've also attempted setting the parent element's position to relative and the image's position to abso ...

Enhancing the appearance of HTML code within x-template script tags in Sublime Text 3 with syntax highlighting

I recently updated to the latest version of sublime text (Version 3.1.1 Build 3176) and have encountered a problem with syntax highlighting for HTML code inside script tags. Just to provide some context, I'm using x-template scripts to build Vue.js c ...

What is the preferred convention for defining AngularJS directives as "attributes" versus "elements"?

When creating Angular directives, I've noticed that some directives could also be defined as either an HTML element or an attribute. I'm curious to know what the community convention is for choosing between the two, and the reasons behind it. Fo ...

How to arrange images of different sizes within a Bootstrap grid

My challenge involves incorporating 3 images with different sizes into a Bootstrap grid of 3 x 4 columns: https://i.sstatic.net/sKi8s.png This is causing disruption in my layout. My desired outcome looks like this: https://i.sstatic.net/mfjFD.jpg How c ...

Tips on enabling users to update SQL database data on an HTML webpage

The mySQL database stores user input from a form like this: <form action="demo.php" method="POST"/> <p><label>title:</label> <input type="text" name="titulo" required/></p> ... $value = $_POST['titulo'] ; ...

Using md-chips and md-select together in multi select mode

I'm having trouble generating md-chips when selecting multiple values from an md-select. Does Md-chips only work with autocomplete analyzers and input fields? <md-chips ng-model="launchAPIQueryParams.type"> <md-select name="launchCalTy ...

Ways to display Angular controller information depending on a particular condition

I am currently working on displaying data from my angular controller based on specific values, in this case, the days of the week. Here is an example of my controller setup: app.controller("ExerciseCtrl", function($scope){ var exercise_arr = [ ...