This question already has an answer here:
Does :not() negation accept descendant selectors? [duplicate]
(1 answer)
Closed 6 years ago.
So I have a code structure like this:
.header-container a:not(.header-menu-right a) {
display: none;
}
<div class="header-container">
<div class="header-menu-right">
<ul>
<li>link</li>
<!-- unimportant links -->
<li>link</li>
<!-- unimportant links -->
</ul>
</div>
link
<!-- important link -->
</div>
As you can see by the notes, I only want CSS to change the last a-tag.
What am I doing wrong here?
Try this and there you go:
.header-container > a {
display:none;
}
Thanks!
Related
This question already has answers here:
Why is my background color not showing if I have display: inline?
(6 answers)
Inline container isn't showing background color when wrapping elements [duplicate]
(1 answer)
Closed 1 year ago.
In this little example I have attached I expected the yellow background to extend to the li tags that are children of the ul but this seems not to be how it behaves when display:inline is applied to the ul tag.
What's the logic behind this behaviour?
P.D. I know how to fix this issue. I could make the ul tag an inline block, but this is not what this question is about. I exactly thought that the below code would have behavef as if display-block was applied. In the end, you have a tag surrounding a content. display:inline makes it show in the same line but shouldn't it big as big as its content?
.li {
background-color:red;
}
.inline-ul {
display:inline;
background-color:yellow;
}
.inline-li {
/*display:inline;
background-color:green;*/
}
<html>
<head>
</head>
<body>
<nav>
<ul class="mainMenu">
<li>Item1</li>
<li class="li">
<span>Item2</span>
<span>Item3</span>
<ul class="inline-ul">
<li class="inline-li">Item11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</nav>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
i'm just starting to learn how to use html5 and css3, and I came across with this problem:
Is there a way to select other element while other is on :taget with css?
Let me explain with an example:
Html:
<body>
<header>
<nav id="menu">
<ul id="buttons">
<li>button</li>
<li>button</li>
</ul>
</nav>
</header>
<section id="one">
<h2>title</h2>
<p>text</p>
<section>
</body>
The idea is to put #menu on target and make #one, for example, change it's color.
I had read about "siblings selectors" (+ and ~ i think) is that a possible solution if both elements are sons of the body?
Sorry for my english, it's not my native lenguage. Thanks in advance!
First of all validate your HTML code
there is no </ul> close tag.
</a> tag no need in <li> tag.
<body>
<header>
<nav id="menu">
<ul id="buttons">
<li>text</li>
<li>text</li>
</ul>
</nav>
</header>
<section id="one">
<h2>title</h2>
<p>text</p>
<section>
</body>
How can use :target.
The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.
/* Selects an element with an ID matching the current URL's fragment */
:target {
border: 2px solid black;
}
For example, the following URL has a fragment (denoted by the # sign) that points to an element called section2:
http://www.example.com/index.html#section2
The following element would be selected by a :target selector when the current URL is equal to the above:
<section id="section2">Example</section>
Working Demo
:target {
color: #00cc00;
}
<h3>Table of Contents</h3>
<ol>
<li>Jump to the first paragraph!</li>
<li>Jump to the second paragraph!</li>
<li><a href="#nowhere">This link goes nowhere,
because the target doesn't exist.</a></li>
</ol>
<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
from the links above. Isn't that delightful?</p>
This question already has answers here:
difference between body and * in css
(5 answers)
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 3 years ago.
I have created a nested list in html.
Why does setting margin: 0 using the *{} selector remove the list indention but not if I use the body selector?
body {
padding: 0px;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Resume
<ul>
<li>Experience</li>
<li>Skills</li>
<li>Portfolio</li>
</ul>
</li>
<li>Interests
<ul>Photography</ul>
<ul>Favourites</ul>
</li>
</ul>
The asterisk * means all, so when you put a property in (all) it basically styles all the elements in your HTML body
But when you choose only to style the body you don't change anything's style but body
You can read the answers here for more details
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
CSS 3 nth of type restricted to class [duplicate]
(2 answers)
Closed 5 years ago.
I have the next code:
<div id="mainContainer">
<ul>
<li class="mainclass class1-1"> </li>
<li class="mainclass class1-1"></li>
<li class="mainclass active"></li>
<li class="mainclass class1-2"></li>
<li class="mainclass class1-2"></li>
</ul>
</div>
I tried to select the second type with class1-2 with the next lines but nothing happen:
#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer li[class*="-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class*="-2"]:nth-of-type(2){right:1.7em;}
.mainclass.class1-2:nth-of-type(2){right:1.7em;}
Exist some css selector especify for this case?
I don't believe you can target the element on its own but if you only have the 2 elements with .class1-2 then you can use the following:
.mainclass.class1-2 + .mainclass.class1-2 {
right:1.7em;
}
Keep in mind this will affect additional elements that come directly after it with the same class.
This question already has answers here:
Should I use <ul>s and <li>s inside my <nav>s?
(9 answers)
Closed 9 years ago.
today i wanted to have a closer look over the nav element from html5. and i've seen on most websites that the way it should be used is with an ul li inside. Well that wouldn't be very semantic because the nav element already acts like a list. Even on MDN i've seen the example using nav ul li elements. But how about just simple nav with links inside and even dropdown
<nav>
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
<a href="#" id="dropdown-menu">Dropdown
<nav class="dropdown">
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
Some Text
</nav>
</a>
</nav>
Is it semantic, is it wrong ? if it's correct the way i used why everyone uses ul li elements inside of nav ?
Update: just for the example i've updated the topic and added the css and js
Javascript
$('#dropdown-menu').on("click", function(e) {
$('.dropdown').slideDown(100);
});
CSS
.dropdown {
display: none;
}
I think good practice (required for wordpress for example) is building navigation this way:
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</nav>
Always use ul, it's natural - navigation is a list.