I have below html code with List items. Here I don't want 'Minutes' list item so I want to hide it. How can I hide this item using CSS. I mean override this style in external css file
<div class="y-dropdown larger open">
<div class="placeholder">Daily</div>
<ul class="items" style="display: block;">
<li>Daily</li>
<li>Weekly</li>
<li>Monthly</li>
<li>Quarterly</li>
<li>Yearly</li>
<li>Minutes</li>
</ul>
</div>
Add CSS display:none for minutes like
li.minutes{
display:none;
}
If you have to overwrite some CSS properties you have to give !important to that property.
Here,
ul.items li.minutes {
diaplay: none!important;
}
Related
I need to hide only the inline style(style="float:left;" from ul tag) when data.unlock_scode value is present. ng-show="data.unlock_scode" is working fine in img tag and I can't use the same in ul tag then it will hide the entire ul section.
<ul style="float:left;">
<li ng-show="data.upfront != ''">Test</li>
</ul>
<img src="u70007.jpg" ng-show="data.unlock_scode" style="float:left;">
You can use ng-style to have condition on your styles
<ul ng-style="{'float': data.unlock_scode ? 'inherit':'left'}">
<li ng-show="data.upfront != ''">Test</li>
</ul>
Use ng-style
<ul ng-style="!data.unlock_scode" style="float:left;">
.....
</ul>
better way is not to add inline style instead use ng-class
.someclass{
add css here..
}
.someotherclass{
add css here..
}
ng-class="{someclass: !data.unlock_scode, someotherclass: data.unlock_scode}"
Hi I'm trying to figure out the way I can access elements in div using ones class.
<div class='hs_terms_conditions field hs-form-field>
<label class placeholder='Enter your name'>
</label>
<div class='input'>
<ul class='input-list'>
<li class='checkbox>
</li>
</ul>
</div>
</div>
My question is how can I access <div class='input'> from <div class='hs_terms_conditions field hs-form-field> and then change <ul> or <li>.
Was thinking of using classes and doing something like this:
.hs_terms_conditions.input.input-list.checkbox{
/*some style*/
}
I did try it but couldn't make it work.
I want to be able to change just that <li> or <ul> inside that div so it doesn't apply on all others.
Use ">":
.hs_terms_conditions > .input > .input-list > .checkbox {
/*some style*/
}
If you use .class1.class2.class3 it will match an element which belongs to all the classes. You could also use .hs_terms_conditions .input .input-list .checkbox.
You can access to .checkbox with parent access selector :
.hs_terms_conditions > .input > .input-list > .checkbox{
/*some style*/
}
I'm building a tumblr theme and have padding applied to my list of notes on the permalink page.
When the list of notes is enabled and there are reblogs/likes for the post it displays the list as intended with padding top and bottom. My issue is when the list of notes is enabled but there are no notes for that post the gap created by the padding is still visible so its creating a gap that shouldn't be there.
I wondered if there is a solution to this? I'm pretty sure there must be, but I just can't get my head around it.
An example of the gap being created is here between the like/reblog buttons and the disqus box.
http://minori-theme.tumblr.com/post/104674196686/melbourne-based-photographer-brooke-holms
HTML
{block:IfShowNotesList}
{block:PermalinkPage}
<div class="f-all e-all d-all b-all a-all">
<section class="f2-f4 e2-e4 d3-d4 b4-b5 a4-a5">
<ul class="postListNotes">
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
</ul>
</section>
</div>
{/block:PermalinkPage}
{/block:IfShowNotesList}
CSS
{block:IfShowNotesList}
ul.postListNotes {padding-top: 50px; padding-bottom: 80px;}
{/block:IfShowNotesList}
{block:****} tags are created exactly for this purpose: to display markup only when **** exists.
Use this code to hide the ul element if there are no notes to display:
{block:PostNotes}
<ul class="postListNotes">
{PostNotes}
</ul>
{/block:PostNotes}
You can hide the rest of the elements too:
{block:IfShowNotesList}
{block:PostNotes}
{block:PermalinkPage}
<div class="f-all e-all d-all b-all a-all">
<section class="f2-f4 e2-e4 d3-d4 b4-b5 a4-a5">
<ul class="postListNotes">
{PostNotes}
</ul>
</section>
</div>
{/block:PermalinkPage}
{/block:PostNotes}
{/block:IfShowNotesList}
Use the empty CSS3 property:
ul.postListNotes:empty {
padding: 0;
}
or even:
ul.postListNotes:empty {
display: none;
}
If the code:
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
produces anything else of blank or html comments, the :empty selector will not work
In this case, if you can, apply a class, let's say .noNotes on ul.postListNotes every time there are no notes to display and use this rule:
EDIT
ul.postListNotes.noNotes {
padding: 0!important;
}
I have following code for the Menu in wordpress:
<div class="menu-about-container">
<ul id="menu-about-1" class="nav-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-574">Our History</li>
</ul>
</div>
I want to give display:none to Our History.But want something like if it is child of menu-about-1 and menu-about-container then and then give display:none.
How can I do it?I know its very silly but I don't have any designing experience.So can any one guide me ?
Use standard CSS selectors to hide any menu item that is a child:
.menu-about-container #menu-about-1 li.menu-item { display: none; }
If that particular item is always menu-item-574 and you want to hide that one, only, use:
.menu-about-container #menu-about-1 li.menu-item-574 { display: none; }
if you only want to hide Our history you can use
#menu-about-1 li{display: none}
But that will hide al the list items so if you want to add others in the future, and you only want to hide the fist one you should use
#menu-about-1 li:first{display: none}
Add this to you css rules:
.menu-about-container > #menu-about-1 > li {
display:none;
}
The > targets the immediate child of the previous selector.
I have this code that styles the <a href="#">:
<div class="styled">
link
<div class="notStyled">
another link
</div>
</div>
The first link have one style and the second link have the same style, I want it to be default like a clean link.
Here, try this JSFiddle example,
.styled > a {
color:black;
}
The > used in this means it only selects direct children of .styled and not ALL children.
What you are probably doing is .styled a, which selects all children (even nested within others), and you don't want to do that...
Without seeing your code I can only guess what you have done.
From your question I get you want to style the first, but not the second a tag.
You could use this to style only the first a tag:
.styled > a {
/* your styling */
}
The > selects the direct children of .styled so this will not style your .notStyled a.
Try this :
.styled > a {
color:red; /*custom style for the first link*/
}
live exemple : http://jsfiddle.net/72bQM/1/
I don't know if this is what you did, but it looks like the second <div> is there just as a try to let the second link have no-style.
I suggest, instead, to give have this code
<div>
<a href="#" class="styled">
<a href="#">
</div>
And then in CSS just
.styled{
/* Give the style you want */
}
This way you just have to add the class="styled" to the link you want to be styled, without using many DIVs.