Conflicting CSS selection elements in WordPress causing theme theme selection conflicts

Despite trying various edits to my custom CSS, such as including 

::selection{color: white; background: #2f3f58;}
, copying and pasting code from sites like W3Schools and stack overflow, nothing seemes to work. I am using the Hueman theme from , which has a similar code that is functioning properly. Even after modifying this code and disabling the theme CSS related to selections, I cannot change the selection color from the red set in the theme options menu. The hexadecimal code for this red color is not present in the theme CSS except in a commented out section that I have tried replacing. Is there a way to override the highlight color using CSS without utilizing the ::selection: element, or am I misunderstanding how to use this element?

The current code I am using is shown below:

::selection {
    color: white !important; 
    background-color: #2f3f58 !important;
}

A big thank you to @citizenen for the helpful suggestions!

htmlcsswordpresswordpress-themingselection

Answer №1

This is the correct element to use for selecting color. To ensure that the style takes precedence over others, you can utilize the "!important" property. Instead of just "background," make sure to specify "background-color" like this:

::selection {
    color: white !important; 
    background-color: #2f3f58 !important;
}

For more information on using !important, check out this resource:

If you're experiencing issues with styles not applying correctly after a certain point in your CSS file (custom.css), it may be due to a missing closing brace. In the future, consider running your code through a tool like Lint () to catch any errors.

Hope this helps!

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

Display the hidden div element when clicked

In my code, I have two div elements as follows: <div class='staticMap'></div> <div class='geolocation-common-map'></div> Initially, the 'geolocation-common-map' div is removed using jQuery when the pa ...

javascriptjqueryhtml

Creating dynamic charts in Javascript using Firebase

My dad recently asked me to enhance our motor home by integrating an Arduino with Firebase to monitor the water and propane tanks. He's hoping to be able to check tank levels from his phone so he can see when they need refilling. I've successful ...

javascripthtmlfirebase

Displaying a loading animation within a specific div element

Is it possible to use jQuery to insert a div into another div? My goal is to replace the contents of one div with a loading div while waiting for an ajax call to return. <div id="content1">foo</div> <div id="content2">bar</div> < ...

javascriptjqueryhtmlcssajax

What is the method to alter the color of the browse button?

I am currently utilizing a custom file input feature from Bootstrap: https://i.sstatic.net/ybCYl.png Is there a way to modify the color of the "Browse" button? My attempts so far: Added a color tag to custom-file-input Added a color tag to custom-file- ...

cssbootstrap-5

Automate web page interactions using Python Selenium to duplicate a class

Is there a method to duplicate a class? view image description here Upon examining the data-sitekey, I aim to replicate everything following it, namely 6Ld_LMAUAAAAAOIqLSy5XY9-DUKLkAgiDpqtTJ9b. Is this feasible? ...

pythonhtmlseleniumautomation

Ways to limit the width of content

While I could use a div container to solve this issue, I'm exploring the possibility of achieving it without one. My goal is to create a layout that is flexible between 640px and 1280px, but remains fixed beyond that range. The colored div I have cur ...

htmlcss

Rearranging the Foundation Grid by incorporating smaller panels ahead of larger panels

I am in the process of designing a visually appealing webpage with no text other than captions. To achieve the desired look, I aim to have each clickable box display in a unique size. Here is the layout I envision: __________________________ | ...

htmlcssresponsive-designzurb-foundation

Is it a good practice to whitelist inputs for preg_replace()?

How can whitelisting be implemented for input fields to prevent HTML and XSS injection? It seems like using preg_replace with regular expressions is a good initial step. Are there any other methods worth exploring? ...

phphtmlinputxsswhitelist

navigate to a different section on the page with a series of visuals preceding it

When I try to navigate to a specific dom element on another page, the page initially works fine but then jumps to somewhere before that element. I believe this issue occurs because the page calculates the position before images load, and once the images ar ...

javascripthtml

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascripthtmlnode.jsvideoheader

Center alignment is not being applied to the divs with the Bootstrap class .justify-content-center

I have been attempting to insert a search form into two parent divs. No matter how I apply the align or justify utility, I am unable to center the search bar in the middle of the page as desired. <div class="col"> <div class"con ...

htmltwitter-bootstrapbootstrap-4bootstrap-5

Creative approach to achieving responsive borders with Bootstrap 5

Looking to create a dynamic border using Bootstrap 5 that will hide at specific breakpoints. I tried the following code: <p class="border-bottom border-lg-0-bottom border-lg-end">text here</p> Unfortunately, this code did not work a ...

cssbootstrap-5

PHP does not automatically escape HTML special characters

Within my ZF2 application, there is a .phtml layout that includes the following code: <p>Created in 2015 <?php echo htmlspecialchars("by Jérôme Verstrynge",ENT_HTML5); ?></p> However, when I review the source of the pages returned by ...

phphtmlzend-framework2html-escape-characters

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Is there a way to conditionally render a component without affecting the layout of other components? I'm trying to avoid unwanted shifts caused by this div https://i.sstatic.net/g1eUd.gif Do you have any suggestions? Here is a snippet of my code: ...

javascriptcssreactjsmaterial-ui

CSS animation - gradual disappearance on mouse exit

Hey everyone, I'm in need of some assistance with my animation. I've created a button that moves right and left in a loop, but I'm encountering an issue when the mouse moves away from the button. The transition is not smooth and it jumps bac ...

htmlcssloopsanimationtransform

changing html numbered list to xml format

Looking to convert HTML ordered lists with different types into XML markup? <ol type=a> <li>This is list item a</li> <li>this is list item b</li> </ol> <ol type=i> <li>This is list item 1</ ...

htmlxmlxslt

Is there a way to restrict the number of checkboxes selected based on the values of radio buttons?

I am currently working with a group of radio buttons: <input type="radio" name="attending_days" value="06-18-13"/>Tuesday June 18, 2013 <input type="radio" name="attending_days" value="06-18-13"/>Wednesday June 19, 2013 <input type="radio" ...

javascriptjqueryhtml

When dynamically loaded HTML is involved, Javascript ajax calls often fail to execute properly

Currently, I am in the process of creating a JavaScript script that can facilitate clicking through <a href> links by only replacing the inner HTML instead of reloading the entire page. The interesting thing is, it seems to be functioning properly, e ...

javascriptjqueryhtmlajax

What is the best way to position my inline-flex element at the bottom of the page?

I'm trying to understand how flex-inline works. I want to make the height expand to 100% and reach the bottom of the screen without overcrowding it with content. html,body{margin:0;padding:0} body{background:black;} #sidebar{ display: inline-f ...

css

Using jQuery, organize tables by the value of their td class

, I am attempting to organize various td elements within one or more trs based on their respective classes. These are all housed in multiple table elements with the classname "hosts". Currently, my jQuery abilities are lackluster and I am struggling to sor ...

jqueryhtmlcss