This question already has answers here:
What are the possible ways to hide an element via CSS [closed]
(7 answers)
Closed 1 year ago.
Hello guys I want to hide some content using CSS code. Can you guys tell me how to hide any div tag or span tag using CSS stylesheet?
Simply by using display: none; property. example
#selector { display: none;} or .selector { display: none;}
display: none;
use this css property for the div or span element.
Hide any content using Css display:none property
#hide{
display:none;
}
You also can Hide any property using JavaScript:
document.getElementById("hide").style.display = "none";
There are two ways to hide content using CSS
display:none and visibility:hidden the difference among two can be found here
Related
This question already has answers here:
How can I override inline styles with external CSS?
(7 answers)
Closed 2 years ago.
I have a code and there is class and css style in code. I can't see and can't change this css code. So My css dosen't work for this span. But I need to change this css style as I want. I need blue color for span.
How I can do that? Help me asap. Thanks.
.grid {
display: block;
}
.grid .item {
color: blue;
}
<div class="grid">
<p>I need change</p>
<span class="item" style="color:red;">This is change place!!!</span>
</div>
Use !important tag
.grid .item { color: blue !important; }
This question already has answers here:
How to change the style of the title attribute inside an anchor tag?
(10 answers)
Closed 6 years ago.
I'm trying to change the pop-up of an element using CSS, yet it doesn't work.
name {
background-color: #00BBFF;
color: white;
}
<button title="name">Test</button>
Looks like you want to use the attribute selector https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
button[title="name"] {
background-color: #00BBFF;
color: white;
}
<button title="name">Test</button>
Unfortunately, the tooltip style cannot be changed in any browser.
I'd suggest you implementing your own with CSS (add a hidden span or some other element with the tooltip and show it on button:hover) or JS (nicer as you could set a delay before is shown).
This question already has answers here:
CSS selector by inline style attribute
(3 answers)
Closed 7 years ago.
I have a div which is set to display: 'none' by the framework our company is using.
<div id="mydiv" style="display: none">...</div>
However when it is shown, it is set to display: block, but I need it to be display: inline-block. So I tried to style the div like this:
#mydiv:not([display='none']) {
display: inline-block !important;
}
But it is not working like I was expecting. I want to achieve this with CSS only. Does somebody know how and if this is possible?
try this example: http://codepen.io/anon/pen/WQZada
Here the attribute to check is style, (not display)
#mydiv[style="display: none"] {
display: inline-block !important;
}
Anyway this is a weak approach, since a change in the markup (e.g. a minification of inline stlye, or an editor change) can affect the style (and viceversa).
Just targeting the element by it's id should be enough to override its inline style:
#mydiv {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
But
For the sake of the question, regarding to selection an element by its inline style value, you could target the [style] attibute and check for the desired text value
(Trouble is that you'd need to match the exact written form of the style property)
#mydiv[style*="display: none"] {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 8 years ago.
I'm trying to find some text inside an element using a css selector, but not include the children of the element. For example:
<div id="information">
This is the text I need
<div>I don't want this text</div>
<span>I also don't want this</span>
</div>
Any ideas?
NOTE: I'm parsing a page so I don't have control over the elements
Apparently not possible using CSS Selectors. With XPath though, if someone is interested:
//div[#id='information']/text()
So you want the loose text inside of #information but you don't want the div and the span? Seems quite simple:
#information {
/* property values */
}
#information > div {
display: none; /* removes content of child div */
}
#information > span {
display: none; /* removes content of child span */
}
I guess you don't really even have to use the child (>) selector, too.
There is no CSS selector to select just the text content of an element. There is nothing illogical about the idea (CSS could have a pseudo-element for the purpose), but currently there is no specification or even draft on such matters.
What you can do is to set styles on an element and then override them on any child element, possibly using a selector like #information * that matches all descendant elements or #information > * that matches all child elements.
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 7 years ago.
I'm making a gallery where when you hover over the main image, the thumbnails should become transparent. I would like to achieve this with pure CSS, but I'm not sure if that's possible.
CSS:
/* should affect thumbs but not main */
/* obviously this code wouldn't work */
#main:hover, #thumbs {
opacity: .5;
}
HTML:
<div id="main">
Hover over me to change #thumbs
</div>
<div id="thumbs">
I change when you hover over #main
</div>
Is this possible using pure CSS?
Sure, just use the adjacent sibling selector:
#div1:hover + #div2 {
...
}
An example here: http://jsfiddle.net/6BfR6/94/
Only children of a selector can be affected. Otherwise, you'll need to use javascript.
For instance:
div:hover #childDiv {
background: green;
}
#div1:hover + #div2 {
...
}
it works fine in IE 7, 8, 9 and 10. No need to any JS or onovermouse and NOT ONLY children of a selector can be affected.
Try the example Link of "Nightfirecat".
even if it is, it will not work in IE :)
i would suggest using onmouseover event
however it is nice question and I am curious if someone has solution of doing it cross-browser via css
I think you're going to need some javascript for that.
No. You would have to use Javascript.