I want to change the style of my li tag for particular div means I want to show that element for whole page,but at start I don't want to show that li tag. I want to change style of that tag.
<ul id="butons_right">
<li>
Top
</li>
<li>
<div id="close"></div>
</li>
</ul>
this is my that element which dont want to show it at start of page. I want to change its style to display:none.
Can anybody provide me any solution.
Thanks in advance.
In CSS:
#butons_right>li {
display: none;
}
However assign something to that tag so you can select that particular tag. I'm not sure which li tag you want to hide.
If it's the first li tag, use li:first-child. If not, assign a class to it, say, hidden, and then use .hidden (#butons_right>.hidden, or just .hidden).
Use the nth-child css selector to select a specific li though CSS:
Here is the example:
#butons_right > li:nth-child(1){
/*your css*/
}
And to hide the first li use the display:none property in css.
Your initial code should state
selector {
visibility:hidden;
}
Once the document is loaded or whatever event of your interest arise, you can modify the style with
selector {
visibility:visible;
}
The visibility property has the benefit of not re-arrange your lay out boxes.
The display property , gets out from the flow your element when is set to none. When you modify it again to return to visibility, the lay out will be affected
Which selector to use
It depends on your preferences/needs
You could apply an id or a class in your markup as "close" and the in your css use
#butons_right li.close {
visibility:hidden;
}
This selector is well implemented cross browser an will work fine with quite strong specificity.
If not you may use (if it is suitable) first-child, last-child or nth-child(n) to target your desired li element
Related
I have a div with class fview.iNside I have a span. Then I have anchor elements inside another span, ul li, another div etc.
I need same style for all anchor elements.
I have used Font-size and color to the class . But the color is not getting updated. Font size is working fine.
The div is dynamic one. So I cant define it as it is.
<div class="fview"><span>
{{Inside i can have any html elemnts like span, div, a, ul, li }}
</span></div>
.fview span a {
color:red;
font-weight : bold
}
I need the color change to all elements inside fview span. Please help me
Please add the following css in your stylesheet and check
Try this:
.fview span a {
color:red !important;
font-weight:bold !important;
}
Also inspect the element and check if any other css not overwriting this.
Note:
The span is a inline element so you should not add any block level element inside it.
If you are using a > h2 etc the it will be incorrect.
But if you can't update the HTML then try to convert the inline element to block using css it will reflect the design.
display: block; // inline-block
Let me know if still you are facing the issue.
.fview span h4 {
color:red ;
font-weight : bold
}
<div class="fview"><span>
<h4 >Example</h4>
</span>
</div>
I think thats what you want.Please check this code. I hope this works for you :)
Following code:
<li>
bla
<span>blabla</span>
hidethistext
</li>
How could I hide the "non-element" "hidethistext" with display:none using CSS without affecting everything else? Meaning, what would be the right selector?
Tried using :not(..) but that seemed not the right approach.
You can't. With css you can only select elements. The :not selector is used to select an element that is not of class x, does not have id y or is not element z. But hidethistext is just a textnode, which cannot be selected. The only solution is to wrap it in a <span/> element with another class then the first span
You can use the visibility property since it can be overridden.
<li>
bla
<span>blabla</span>
hidethistext
</li>
CSS
/* hide all elements (including textnode "hidethistext" */
li {
visibility: hidden;
}
/* set other elements to visible */
li span, li a {
visibility: visible;
}
Example here on this jsfiddle.
Related SO question.
I worried about my coded css. Actually i had to change the color of anchor tag on hover of li. So i searched about this and find an answer. This accepted answer is working fine. But i'm worried about this line css.
.slider-menu ul li:hover a{ color:#ffffff; }
Because as per my understand there is no parent class of a, so that's why i just want to clear my concept that above code will change the every anchor tag color on same page or it will just change the child anchor tag of .slider-menu ul li?
Yes it will only affect anchors (<a>) whose parent is a hovered <li> whose parent is an <ul> that is a child of .slider-menu, specifically.
It will affect only <a>tag of all li whose parent is .slider-menu.
Other than that it won't.
My page generates two ULs of the same ID and I would like to remove the last one via CSS (display: none). I was trying with :last-child property but no luck at all. I either made both of them disappear or none of them.
Example:
<div id="content">
<ul id="some-ul">
<li>...</li>
<li>...</li>
</ul>
<ul id="some-ul">
<li>...</li>
<li>...</li>
</ul>
</div>
I would like to apply display: none only for the last ul#some-ul inside my #content.
It could be done like so:
#content ul:last-child {
display:none;
}
Note that last-child is only supported in IE9+. As mentioned by #Jop, you should set a class on the last child element to get around this for older versions of IE.
jsFiddle here.
Also, remember that ID's should always be unique.
Completely generic way to do this, that relies on no classes or ID's
div ul:last-of-type li:last-child {
display:none;
}
So basically, the div is the parent item that contains the list items - it could have a class or ID if you want.
Within that, you have your ul tags - the last-of-type does the magic, finding the last ul within the parent div. You then simply use last child on the li.
Here's the fiddle:
http://jsfiddle.net/Kx8SN/
Let's say we have:
<div id="view-item-hero-info">
<h2>{{name}}</h2>
<h4>{{location}}</h4>
<h3>
<span id="view-item-hero-header-score">
You scored {{userScore}}pts
</span>
</h3>
{{description}}
</div>
Is there a way I can hide the text directly inside #view-item-hero-info? I know I can use text-indent but is there another, nicer, way?
Note: I don't want to hide the element, just everything inside it.
Note 2: Hiding all the elements within #view-item-hero-info is fine, I can use #view-item-hero-info > * { display: none } but then the text directly within #view-item-hero-info is still visible. I need #view-item-hero-info to remain visible so that its background can be seen but the text inside it must be hidden.
You can try:
#view-item-hero-info {
color: transparent;
}
Using this CSS:
visibility: hidden;
hides your element, but preserves the space it would normally take. Whereas this CSS will hide an element as if it never existed:
display: none;
you can use this code if u need hide text
.text-hidden{
font-size: 0;
text-indent: -9999px;
}
to hide all direct child's
use
.hidden-nested > *{
visibility: hidden; /*or next line */
display:none ;
}
if you need all child's use last code but change class to
.hidden-nested *
Use css display property. In HTML this would look like <span style="display: none">
Using javascript: document.getElementById("view-item-hero-header-score").style.display="none"
in css:
#view-item-hero-header-score {
display: none;
}
Using CSS you can set a style:
visibility:hidden
So to hide all descendants (*) within your element:
#view-item-hero-info * { visibility: hidden }
If instead you only want to hide direct descendants ie children but not grandchildren then you use the direct child selector (>)
Rather than selecting all (*) you can select particular descendants eg divs:
#view-item-hero-info div { visibility: hidden }
Equally instead of the visibility you can use:
display:none
The display option doesn't take up space whereas if you want to reserve the space for when the element will be shown you use the visibility option
EDIT:
There isn't a selector just for a text node (ie the text without the element). See Is there a CSS selector for text nodes?. So all children of your span need to be in an element in order to have style applied.
As a hack you could just put another span directly in your main one and all content (including the standalone text) within that. Then the hiding will work.
Could you use JS to iterate though all child items in the elements DOM and then use JS to overwrite the CSS? Something like:
var items_i_want = document.getElementById("view-item-hero-header-score").elements
for(var i = 0; i < items_i_want .length; i++)
{
items_i_want [i].style.display="none"
}