My HTML structure is as per the following:
<nav class="main-nav">
<ul>
<li class="gallery-collection">
Welcome <!-- Hide this -->
</li>
<li class="page-collection">
About
</li>
<li class="gallery-collection">
Support
</li>
...
How do I hide the first element saying "Welcome" using CSS? Note that 2 elements have the same class here: 'gallery-collection'.
Max compatibility:
.main-nav li {
display: none;
}
.main-nav li + li {
display: list-item;
}
Less compatibility, but not too bad:
.main-nav ul li:first-child {
display: none;
}
With CSS only (as your question was only tagged css):
.main-nav li:first-of-type
{
display:none;
}
The :first-of-type selector is supported in all major browsers, except IE8 and earlier.
Related
when in mobile view my css responsive menu for mobile, will show the submenu when you click on the link, but how do change the link, to something like 'Close X' as the list is long, and if you back on the link it doesn't close, unless you click a different link.
I've managed to create a separate close link. But this now means I've got two links. I want 1 link which will open, then change to the a close link when the submenu is open and when you click on that it will close.
Thanks
css
nav li ul {
display:none;
}
# open
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
position:absolute;
opacity:1.0;
background-color: #343434;
padding:0.5em;
}
# close
nav ul li #close:hover + .hidden, .hidden:hover {
display: none;
position:absolute;
opacity:1.0;
background-color: #343434;
padding:0.5em;
}
menu
<ul>
<li><span id="close">Close X don't show till city clicked</span>
Cities ￬ remove and replace with close or up arrow
<ul class=hidden>
<li>London</li>
<li>New York</li>
<li>Rome</li>
</ul>
</li>
</ul>
This works as you are hoping I believe, The majority of the function is via CSS to keep jquery to a minimum.
CSS Selectors
> selector for immediate children
~ selector for all siblings of the preceding element
Let me know if this isn't what you were hoping for.
Demo
// Add click event to collapse anchor
$("li > a.collapse").click( function() {
// Remove .expand class from parent
$(this).parent().removeClass("expand");
});
// Add click event to expand anchor
$("li > a.expand").click( function() {
// Add .expand class to parent
$(this).parent().addClass("expand");
});
li > a.collapse, li.expand > a.expand {
display: none;
}
li.expand > a.collapse {
display: inherit;
}
li > a.expand ~ ul {
display: none;
}
li.expand > a.expand ~ ul {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a class="collapse">Close</a>
<a class="expand">Cities</a>
<ul>
<li>London</li>
<li>New York</li>
<li>Rome</li>
</ul>
</li>
</ul>
This question already has answers here:
Remove underline only from anchor element child
(7 answers)
Closed 5 years ago.
I have a problem with css :not function.
When I hovering to link there is underline both of them Item1 & Description. I don't want to see underline below Description when hover.
Here is my menu code:
<ul>
<li>
<a href="#">
Item 1
<span>Description</span>
</a>
</li>
</ul>
CSS:
span { display:block; }
ul li a:hover:not(span) { color:blue; text-decoration: underline; }
When I change span display to inline-block it is working nice but need to be only block. How can I solve it ?
Also, Inline-block shows the description NEAR of the Item. I want to put it under of the Item Name. How can I make it ?
you are saying to the style a:not(span), A that is not a SPAN, of course a isn't a span ;)
Use a css class for this purpose for instance like :
span { display:block; }
ul li a:not(.has-span):hover { color:red; text-decoration: underline; }
<ul>
<li>
<a href="#">
Item 1
<span>Description</span>
</a>
</li>
<li>
<a href="#" class="has-span">
Item 2
<span>Description</span>
</a>
</li>
</ul>
You shouldn't put your state (:hover) before the selector. So you need to change it to:
ul li a:not(span):hover { color:blue; text-decoration: underline; }
And moreover this will not work, because, a single element cannot be a <a> as well as a <span>. Instead you need to just use:
span { display:block; }
ul li a:hover { color:blue; text-decoration: underline; }
ul li a:hover span { color:black; text-decoration: none; }
I want to select the first li without class="test" using :not and :first-child pseudoclasses. In this example I try to set color blue to <li>Third</li>:
ul li {
color:red;
}
ul li:not(.test):first-child {
color:blue;
}
<ul>
<li class="test">First</li>
<li class="test">Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
Why not do the below, which uses a combination of rules to filter the item you need (you can combine rules #1 and #3).
This has the added advantage of it not mattering what the index is of the first item with the class .test
ul li { /* <-- select all list items */
color: red;
}
li:not(.test) { /* <-- select all list which arent test */
color: blue;
}
ul li:not(.test) ~ li { /* <-- select all list items which follow an item without test */
color: red;
}
<ul>
<li class="test">First</li>
<li class="test">Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
I'm developing a css Tree view and I want, if is possible, to keep the hover effect only on the element that has children:
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span></li>
<li><span>Item 1.3</span></li>
</ul>
</li>
</ul>
What I've done in css was:
.treeview li>ul>span:hover, .treeview li>ul>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
but this doesn't work like I expected.
You want the :hover effect only inside the "Item 1" right?
.treeview > ul > li:hover > span {
color: red;
}
Also check this Fiddle.
UPDATED (based on your comment)
.treeview li:hover > span {
color: red;
}
And updated Fiddle. This however will also trigger the span on "Item 1.1.1" when hovered...
Is that what you want ?
http://jsfiddle.net/Defoncesko/p63b9/
HTML
<div class="treeview">
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Item 1.1</span></li>
<li><span>Item 1.2</span></li>
<li><span>Item 1.3</span></li>
</ul>
</li>
</ul>
</div>
CSS
ul ul li:hover {
background-color:#eee;
border:1px solid #94a0b4;
color:#000
}
I think this is what you want. I added another larger li in my fiddle so you can see.
.treeview ul>li>span:hover {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
.treeview ul>li>span ~ ul>li>span:hover {
background:#fff;
border:none;
color:#000
}
Demo:http://jsfiddle.net/QdEEf/1/
Edit: Actually If im truly understanding your question. Youre looking for a way to determine if the li has a ul as a child then give that li a hover if it does. If this is the case youre gonna need to use javascript to determine if it has a ul child. There is no way to do this with CSS
I have match listings dynamically generated. After each member I display a li that displays VS within it. However the very last ul li in the div match shouldnt be visible. Any ideas how I can do that?
HTML
<style>
.match {
}
.match ul {
}
.match ul li {
float: left;
margin-right: 50px;
}
.match ul li:last-child {
display: none;
}
</style>
<div class="content">
<div class="match">
<ul>
<li>Wade Barrett</li>
<li style="">VS</li>
</ul>
<ul>
<li>Shaemus</li>
<li style="">VS</li>
</ul>
<ul>
<li>Randy Orton</li>
<li style="">VS</li>
</ul>
<ul>
<li>John Cena</li>
<li style="">VS</li>
</ul>
<ul>
<li>Edge</li>
<li style="">VS</li>
</ul>
<ul>
<li>Chris Jericho</li>
<li style="">VS</li>
</ul>
<p class="clear"></p>
</div>
</div>
The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.
You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.
Change
<li style="">VS</li>
to
<li class="vs">VS</li>
And use this instead of your current :last-child selector:
.match ul:last-child li.vs {
display: none;
}
What browser are you using, IE does not support it. The latest version of the other browsers do, but I would recommend placing a class on it to make it 100%.