The CSS code ".btn btn-primary * { visibility: hidden; } is failing to work as intended

Trying to hide specific buttons for print using CSS, but it doesn't seem to be working. Here is the code snippet:

.btn btn-primary * {
  visibility: hidden;
}
<div id="control" style="display: none">
         <button class="btn btn-primary" onclick="toEmail()">Send to Mail</button>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
         </div>

Answer №1

These two classes are combined within the same button tag, requiring the selector to exclude the use of *:

.btn.btn-primary {}

The presence of * typically refers to all children of the current element.

In this instance, I have eliminated the display: none attribute from id="control" to clearly demonstrate that the code is functional.

.btn.btn-primary {
    visibility: hidden;
}
<div id="control"><button class="btn btn-primary" onclick="toEmail()">Send to Mail</button>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button></div>

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

Submitting a HTML form with a select element that will pass comma-separated values in the URL query

My HTML form includes a dropdown menu. <form method="get"> <select name="category[]" multiple class="form-control"> <option value="1">First Value</option> <option value= ...

Retrieve a specific choice from a radio button and store it in a MySQL database

I need assistance with extracting the value from a selected radio button and inserting it into MySQL database. Although I have tried using isset(), I am facing issues when trying to retrieve the chosen radio button. Could someone please lend a hand? < ...

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

How can one manage styling choices in R Markdown while creating a PDF document?

Currently, I am utilizing R Markdown within the RStudio platform to produce documentation. When selecting the "Knit HTML" option, my output appears satisfactory. The ability to modify styling options and apply CSS Files directly is a beneficial feature. ...

Save this text in HTML format to the clipboard without including any styling

When using this code to copy a htmlLink to the clipboard: htmlLink = "<a href='#'>link</a>"; var copyDiv = document.createElement('div'); copyDiv.contentEditable = true; document.body.appendChild(copyDiv); ...

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

Is there a way to implement SCSS that is dependent on the user's browser language? When I checked, I found the browser language specified in <html lang = "de"> and in the CSS code as html[Attributes Style] {-webkit-locale: "en&quo ...

HTML/ModX styling for selected textboxes

I am looking to enhance the style of my search-box, which is similar to the one on THIS website. While I have tried using :active, the effect only lasts for a brief moment. Currently, my code is heavily influenced by modX terms, but I will still share it h ...

Can anyone provide guidance on utilizing libraries within a Chrome extension?

I have been attempting to implement this for a total of 10 hours and I am struggling to make it work in script.js. // Creating a button element const button = document.createElement('button'); button.textContent = 'copy'; button.addEve ...

Rails: Generating HTML output straight from the controller

Looking for some guidance on handling the response from an AJAX call. Here's what I'm trying to achieve: Initiate an AJAX call to my Rails application to retrieve an HTML document. In the Rails controller, access the HTML document stored on dis ...

Having trouble with jQuery loading for the first time

I am having trouble getting the jQuery to load properly. My goal is to toggle classes on specific items identified by their ID. When an item is clicked, I want it to have the class "menu-selected" while the other item has the class "unselected." I have i ...

Display all elements on a webpage using Javascript without the need for scrolling

I'm looking for a way to ensure all items on a webpage load immediately, without having to scroll down multiple times before running a script to find a specific item. Is there a method to have all items load at once without the need to manually scroll ...

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

How to create a continuous loop for a JavaScript carousel

I have a simple carousel set up with this code. I'm looking to make it loop back to the beginning after reaching the third quote-item. Can anyone provide some guidance? Thank you! This is the JavaScript used: <script> show() $(functi ...

Exploring HTML for a specific value using Swift

My journey into learning Swift and Xcode began with a simple project. I decided to work on a project that involved finding a specific value on a website. After successfully retrieving the HTML code, my next step is to isolate and extract the exact value I ...

Steps to prepend a domain to file_get_contents function in PHP script

Recently, I enlisted the help of a PHP coder to make modifications to two files for me. The purpose was to allow users to link directly to a file converted from DOC to IMG on . Below you can find the edited code (highlighted by 'DrTech76'): get ...

What is the Best Way to Send JavaScript Variables to MYSQL Database with PHP?

I am having trouble sending my variable to a MySQL database. The database only displays the variable when using the HTML input tag. The error message I received was "Undefined index: rate & amount." Seeking assistance to resolve this issue. Thank you! ...

Animating Jquery to smoothly change opacity until it reaches 100% visibility

The script I have does several things, but the main issue lies in the last line where the opacity of the class doesn't seem to reach 100%.... $('.fa-briefcase').parent().on('click', function () { $("#colorscreen").remove(); ...

"Learn how to properly load the style.css file from the root directory into your WordPress page.php and single.php files

Having an issue with my WordPress theme. The style.css stylesheet does not seem to be loading in the page.php contents. I noticed that when I add <div class=w3-red"> <button class="w3-btn w3-red"> and other related codes while editing a post in ...

Exploring the contrast between window and document within jQuery

I'm curious about the distinction between document and window in jQuery. These two are commonly utilized, but I haven't quite grasped their differences. ...

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...