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;}
Related
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>
This is my first time on stackverflow and hope someone could help me with this kind of problem.
I made website in Wordpress and want to disable hover effect on my category list in webshop. There are parent categories which automatically, when you hover with mouse, dropdown child categories. After researching i found css solution which looks like this:
.widget.woocommerce.widget_product_categories ul li{
pointer-events:none;
}
Wordpress Customize Custom CSS,
After this kind of update i found the problem - when i click on parent category, nothing happens (because of pointer-events obviously).
Is there any CSS solution for this kind of problem?
Hello did you try the following, I think you can use the CSS to just disable to pointer event on hover:
.widget.woocommerce.widget_product_categories ul li:hover {
pointer-events: none;
}
Edit 1:
ok the functionality that you need can't be done with CSS alone, you will need a bit of Javascript.
Try to add the following code in theme javascript file
jQuery(".cat-item.cat-parent > a").click(function(event) {
event.preventDefault();
const ul_children = jQuery(this).parent().find('> ul.children');
if(jQuery(this).parent().hasClass('open')) {
jQuery(this).parent().removeClass('open')
ul_children.css('max-height',0)
} else {
jQuery(this).parent().addClass('open');
ul_children.css('max-height', ul_children[0].scrollHeight )
}
})
also add the following CSS:
.product-categories > .cat-parent:hover > ul.children {
max-height: 0px;
}
.product-categories li ul.children li:hover > .children {
max-height: 0px;
}
You should replace this code
.cat-parent:hover > ul.children {
max-height: 373px;
overflow-y: scroll;
overflow-x: hidden;
}
by this one
.cat-parent:active > ul.children {
max-height: 373px;
overflow-y: scroll;
overflow-x: hidden;
}
The only step left is to remove the link from your parent category. If you do not remove this link, it will redirect you automatically when you click on it
Simply we can hide container when in hover effect by Jquery such as
// remove popup on hover for mini cart dawar
$(".icon").hover(function(){
$("#container").css("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 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:
How can I change the text which is contained in <p> tags by using CSS's pseudo class selectors?
For example, when I hover over a paragraph, the content of paragraph must change to what would be specified in p:hover selector.
jsFiddle.
One way is to use p:hover:before along with the content attribute.
Here's an example:
Html:
<p>
<span>First text!</span>
</p>
CSS:
p:hover span {
display:none
}
p:hover:before {
content:"Second text appears instead!";
color:red;
}
If you'd like to know more about the content property, check out this nice little article.
Zenith has a simpler solution, but the following allows you to put formatting in your "hover" content. Try the following HTML:
<p>
<span class="normalDisplay">Text to display <em>usually</em>.</span>
<span class="hoverDisplay">Text to display on <em>hover</em>.</span>
</p>
and the following CSS:
p .hoverDisplay {
display: none;
}
p .normalDisplay {
display: inline;
}
p:hover .hoverDisplay {
display: inline;
}
p:hover .normalDisplay {
display: none;
}
Fiddle