I want to hide all the elements in some screen resolution and just show the wanted element to be visible:
For instance:
*{
display: none;
}
#block{
display: block !important;
}
But this won't override the display property anymore. demo
* targets all elements within the document, including html and body as well. That's why the content is still hidden - verify that.
If you want to select all elements within the <body> you should do that as follows:
body * {
display: none;
}
#block {
display: block;
}
<div id="block">block</div>
Because body and html are included in the universal selector *, which has the display: none; rule.
http://jsfiddle.net/nk8np9vo/6/
If you open the target frame with your favourite DOM inspector you'll see that <body> remains hidden:
Related
i have the following Div:-
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">
and i am trying to hide it using this css, but the div is not been hide:-
[data-automation-id]="pageHeader"
{
display:none;
}
any advice?
Your selector syntax is a bit off. It should be element[attribute="value"] to style a element from it's custom attribute. Attribute Selectors - MDN
div[data-automation-id="pageHeader"] {
display: none;
}
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">Text</div>
If the HTML element won't always be a <div>, you can also use this selector syntax [attr=value] which represents elements with an attribute name of attr whose value is exactly value.
[data-automation-id=pageHeader] {
display: none;
}
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">Text</div>
I'd like to hide all of the content on a page except for on specific div containing class="content-container" when printing a webpage.
My markup now is:
#media print {
:not(.content-container) {
display: none!important;
}
}
Now when I try to print the page nothing is visible, also the div isn't. I think I need to select like everything that is not a child of .content-container but don't know how.
Does somebody know how to target everything but that div and it's children?
N.B. This solution only works if .content-container is, itself, not a child of another element.
You will be able to achieve this effect by applying display: none to every element on the page and then over-riding that display specifically for .content-container and its children.
Example:
#media print {
/* APPLY DISPLAY:NONE TO EVERYTHING */
* {
display: none;
}
/* OVERRIDE DISPLAY:NONE FOR .CONTENT-CONTAINER AND ITS CHILDREN */
html,
body,
.content-container,
.content-container * {
display: initial;
}
}
Where .content-container is a child of main
If .content-container is consistently a child of main, the same effect should be relatively easy to achieve with the following style rules:
html,
body,
main,
main .content-container,
.content-container * {
display: initial;
}
Working Example:
* {
display: none;
}
html,
body,
main,
main .content-container,
.content-container * {
display: block;
}
<header>ABC</header>
<main>
<h2>DEF</h2>
<article class="content-container">
<p>GHI</p>
<p>JKL</p>
</article>
</main>
<aside>
<p>MNO</p>
<aside>
<nav>
<ul>
<li>PQR</li>
<li>STU</li>
</ul>
</nav>
How Can I hide a content for specific page in css.
I find on the internet some solutions but they only valid for element's id.
This code is an example
.page-id-47 #header-image-id { display: none; }
I want to apply this on a class not id because some content does not have id I tried to use this but it does not work with me:
.page-id-47 #header-image-class-name { display: none; }
and also this code is hide the class for the whole website:
.class-name{
display:none;
}
Any help please?
Try using visibility: hidden, as shown below :-
.myClass{
visibility: hidden;
}
<div class="myClass">
<h1>hello</h1>
</div>
Use the following CSS
body .page-id-47 .header-image-class-name {
display: none;
}
After body give a space and type .page-id-47 .header-image-class-name {display: none;}
Is it possible to check the class of an element, see if it exists, and then apply the style for another class?
Example pseudo code:
if (.myClass .myBlock == true) {
.otherClass {
display:none
}
}
It's not possible in this context. But you can achieve a similar result with the cascading nature of CSS.
Apply a class to the body of your website:
.another-class {
display: none; // hides .another-class by default
}
body.special-class {
.another-class {
display: block; // shows if the body contains .special-class
}
}
Since the specificity of the generated output is higher at the second rule, the elements with .another-class will be visible.
Give the following row a class
Utilising the + selector enables us to display the row after the mentioned class. This way we can style dropdowns popups, given we have the following HTML:
.popup {
display: none;
}
.popup:hover {
display: block;
}
.container:hover + .popup {
display: block;
}
<div class="container">Hover me!</div>
<div class="popup">This is a popup!</div>
I'm afraid that's all that is possible with CSS.
I use jQuery to animate my page - a function called slideToggle(). I can view this in the debugger and see the styles applied to my <nav> element.
The problem I'm facing, is that after I call slideToggle ( a second time ) it sets display:none to <nav> as it correctly should.
However, If I expand the screen again, the menu does not re-appear in its normal state as it should.
I set it in the media query but it is ignored.
#media screen and (max-width: 1000px){
/* This does nothing but I want it to turn the display on.
*/
nav {
display: block;
}
}
To answer the question can I override inline-css? ... Yes, by using !important.
Your real question:
By adding !important to your media query when the screen is big again. see following snippet (run in full screen and make screen smaller/bigger)
(function(){
$('button').on('click', function(e){
$('#test').slideToggle();
});
})();
#media screen and (min-width: 1000px) {
ul {
height:50px;
background-color: red;
width: 100%;
}
li {
display: inline-block;
height: 50px;
line-height: 50px;
float:left;
margin-left: 50px;
}
#test {
display: block !important;
}
button {
display: none !important;
}
}
#media screen and (max-width: 1000px) {
ul {
background-color: red;
width: 100%;
}
li {
display: block;
height: 50px;
line-height: 50px;
}
#test {
display: none;
}
button {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<ul>
<li>This</li>
<li>Is</li>
<li>a</li>
<li>menu</li>
</ul>
</div>
<button >Toggle menu</button>
Media queries are irrelevant here. They don't affect the cascade at all.
Inline rules always trump rule-set rules unless the rule-set rule is !important and the inline rule is not.
In general, the most specific CSS selector will be applied to an element. The cascading order is defined as follows (highlight by me):
Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the
associated selector matches the element in question and the target
medium matches the media list on all #media rules containing the
declaration and on all links on the path through which the style sheet
was reached.
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
Sort rules with the same importance and origin by specificity of selector: more specific selectors will override more general ones.
Pseudo-elements and pseudo-classes are counted as normal elements and
classes, respectively.
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.
Furthermore, you can forcefully apply a style using the !important keyword. You should not use the declaration, however, unless it is absolutely necessary after all other avenues have been exhausted. I recommend reading this article if you want to learn more about the !important keyword, when to use it and why to avoid it.
You can add a class in the media query and call addClass in your function.
By the way
You set display: block; for nav when max-width: 1000px
It should be MIN-width if you want to display the nav when the screen widens.
this will work 100%;
#media screen and (min-width: 1001px){
/* This does nothing but I want it to turn the display on.
*/
nav {
display: static !important;
}
}