.btn btn-primary * { visibility: hidden; } is not working

Question

I want to hide few buttons to print so I am using this CSS code but it is not working still button are showing in print HTML code is

.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>

Do you mean `.btn.btn-primary *`? – Hao Wu Mar 10 '21 at 03:57 — Hao Wu, Mar 10 '21 at 03:57
Yes both way it is not working @HaoWu – jugal Mar 10 '21 at 04:05 — jugal, Mar 10 '21 at 04:05

s.kuznetsov · Accepted Answer · 2021-03-10T04:12:21.433

Because these two classes are written in the same button tag. This means that the selector should look like this, and without *:

.btn.btn-primary {}

Since * is a reference to all children of the current element.

In this example, I removed display: none from id="control" to visually understand that the code works.

.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>

.btn btn-primary * { visibility: hidden; } is not working

1 Answers1