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.
Related
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;
}
I've managed to put a great looking menu togheter!`
<li class="huvudmenu">Framsida</li>
<li class="huvudmenu">
<a>Om oss</a>
<ul>
<li>Styrelsen</li>
<li>Historik</li>
<li>Stadgar</li>
<li>Topeliuspriset</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li class="huvudmenu">Verksamhet
<ul>
<li>Hangö seminariet</li>
<li>Årsberättelser</li>
</ul>
</li>
<li class="huvudmenu">Estholmen</li>
<li class="huvudmenu">Bli medlem</li>
`http://jsfiddle.net/hx6uvc19/ The setup I have does not, unfortunatley, work very well on touch screen devices. Is there any way I can keep the design while making it touch screen compatible?
Thanks!
You can not use the :hover pseudo class on mobile. In order to get this effect you can use JQuery as stated by #jbutler483 in the comments.
If you wanted to do this you could do it by adding an .active class to the main li's (By using the class .huvudmenu) on click/touchstart and add this to the css where you have your hover styles as well.
This is the JQuery:
$('.huvudmenu').on('click touchstart', function(e){
e.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
});
and the styles to add are:
nav ul li.active > ul {
display: block;
}
and
nav ul li.active:after {
width: 100%;
background: #404040;
}
this will then allow the styles on click and touchstart events. If you wanted this to only run on mobile you could just remove the click and use touchstart events and/or put some kind of detection that this is a mobile device before initialising the JQuery function.
Here is an update to your fiddle: http://jsfiddle.net/lee_gladding/hx6uvc19/3/
I have this html:
<li class="arrow branches"></li>
<li class="arrow branches"></li>
<li class="arrow branches"></li>
<li class="arrow"></li>
<li class="arrow"></li>
<li class="arrow"></li>
I want to give css commands only for "arrow branches" classes,how can I give them css that wont effect the "arrow" classes?
Create the class .branches:
.branches{
color:#f00;
}
If you want to apply it to only those elements that have branches and arrows then put them together:
.arrow.branches{
color:#f00;
}
But if you want to apply it to more than one class thats easy too:
.branches, .otherClass{
color:#f00;
}
It's extremely simple:
li.arrow.branches
{...styles...}
This selects LI elements with the classes branches AND arrow, but not arrow on its own.
.arrow.branches { // your css }
Works only for elements with both classes.
I have a page with a default CSS file. In this page I have:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<br>
<ul>
<li>B1</li>
<li>B2</li>
</ul>
<br>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
<br>
I can view the default CSS but I cannot amend
ul {
paddind-left:15px;
}
what I want to do is to exclude only B1 and B2 from the default css. A and C should still have the default property but B1 and B2 should have PADDING-LEFT:0PX;.
I have used (cssreset-min.css) but all the css was eliminated. Any help?
Give the parent ul a new class:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<ul class="newClass">
<li>B1</li>
<li>B2</li>
</ul>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
Then do:
ul.newClass {
paddind-left:0px;
}
This will work in all browsers. If you're not concerned about that, use #Andy answer.
if you want to apply for this 3 named list..simply use div with different id for B1,B2....but if you want to apply for an huge list it would be difficult
If I understand right, ul li:nth-child(3), ul li:nth-child(4) { padding-left: 0; } should work
The nth-child selector targets specific children, in this case the 3rd and 4th
Edit: After seeing your edit, the new code that you will need to do is: (I will use #container as the name for your containing div, whatever that is)
#container ul:nth-child(2) li { padding-left: 0; }
You can try something like this :
http://jsfiddle.net/4X62Y/
Here's another solution without changing the HTML:
ul:not(:nth-child(3)) {
padding-left:15px;
}
Example
This will probably not work in all browsers, you'll need to change the HTML for that and use the answer provided by #Alex Thomas .
<style type="text/css">
#featured a:first-child
{
background-color:yellow;
}
</style>
<div id="featured">
<ul class="ui-tabs-nav">
<li><span>test 1</span></li>
<li><span>test 2</span></li>
<li><span>test 3</span></li>
<li><span>test 4</span></li>
</ul>
</div>
I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.
They are all highlighted because each a is the first-child of its parent li
What you probably want is something like:
#featured li:first-child a
{
background-color:yellow;
}
Because all anchors are the first child of their parents. You need to:
#featured li:first-child a {
background-color: yellow;
}
If you always have a list I would prefer the CSS solution like #powerbuoy and #danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/
The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.
Nevertheless when list-styling is your only task here then I would recommend the CSS solution.