CODEWITHSUNDEEP
css
Jackie
Jackie

Reputation: 23477

Use CSS to hide all tags but certain ones w/ no ability to add class

I would like to do something like this....

body{
display:none;
}
#signIn_form_section{
display:inline;
}

Of course this does not work but I am looking for something similar. Basically I want to whitelist tags that are allowed to display.

Added html in jfiddle....

Link

Basically I just want the form and non-hidden input fields to show up.

Upvotes: 0

Views: 367

Answers (4)

Mohinder Singh
Mohinder Singh

Reputation: 1830

First Set

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { display:none; }

then make a class and set it to display:block; add this class to those elements you want to show.

Upvotes: 0

Adam
Adam

Reputation: 5236

I have created a working CodePen example of how to do this. You need to be specific about the tag, such as section in this example, *:not does not work properly.

HTML:

<section>
  <article>
    <p>I am hidden</p>
  </article>
</section>

<section class="display">
  <article>
    <p>You can see me</p>
  </article>
</section>

CSS:

section:not(.display) {
    display: none;
}

Upvotes: 1

mayabelle
mayabelle

Reputation: 10014

You can add a class display to elements that you want to display and do this to hide all the ones that don't have that class:

*:not(.display) {
    display: none;
}

However I would question why you want to do this.

It might make more sense to add a class hidden to elements you want to hide and do this instead:

.hidden {
    display: none;
}

Upvotes: 0

opalenzuela
opalenzuela

Reputation: 3171

You probably mean:

 * {
     display: none;
 }
 #signIn_form_section{
     display:inline;
 }

However, I don't believe this is a good idea... Could you please develop your requirements? Why you need to do so?

Upvotes: 0

Related Questions