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>
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I’m new to HTML/CSS and I’m having a bit of trouble understanding how the :not(:last-child) selector works. I’ve read the explanation on MDN and it’s a bit over my head so I was hoping for a simpler explanation. I’ve written this code to better illustrate my issue:
<html>
<head>
<style>
.paragraph:not(:last-child) {
background: #ff0000;
}
</style>
</head>
<body>
<p class="paragraph">The first paragraph.</p>
<p class="paragraph">The second paragraph.</p>
<ul class="list">
<li class="list_item">List 1</li>
<li class="list_item">List 1</li>
<li class="list_item">List 1</li>
<li class="list_item">List 1</li>
</ul>
<div class="new_div">
<p class="test123">Hello World!</p>
</div>
</body>
</html>
The way I understand it the line, .paragraph:not(:last-child) { background: #ff0000; } should tell CSS to apply a red background to every element with the class “paragraph” except the last one. The behaviour I should see is a red background applied to the first paragraph and nothing else.
However, CSS applies a red background to both paragraphs. It’s almost as if CSS is classing the unordered list as a paragraph and treating that as the last child or something. But I can’t see any reason why it would do that.
If anyone could explain how this behaviour makes sense I’d be very appreciative. Please bear in mind I’m very much a beginner so ELI5 if possible 😊
Thanks.
You are very close! Last child pseudo requires the count of items within a context, in your code you are saying all paragraphs but not limiting the set so the browser doesn't know which to style.
I've updated your code to contain the paragraphs in a div and now the last paragraph is not styled with a red background. I had not thought to put a pseudo in a not pseudo so I learned something too. :)
For example if you want to do the same with the unordered list you can do all unordered list li's or use the list class to isolate lists with that class for this style. This is because li's are counted intrinsically, which means the browser knows how many there are already.
.container .paragraph:not(:last-child),
ul.list li:not(:last-child),
.new_div p:not(:last-child) {
background: #ff0000;
}
<div class="container">
<p class="paragraph">The first paragraph.</p>
<p class="paragraph">The second paragraph.</p>
</div>
<ul class="list">
<li class="list_item">List 1</li>
<li class="list_item">List 1</li>
<li class="list_item">List 1</li>
<li class="list_item">List 1</li>
</ul>
<div class="new_div">
<p class="test123">Hello World!</p>
<p class="test123">Hello World!</p>
</div>
I'm using :target in html and I code something like that:
<div class="1">
<div>
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
and I've done this in css:
.ex ul {
display: none;
}
.ex ul:target {
display: block;
}
I need to make so that when you click on the link (in this case the words 'link to part 2') the #2 ul show, (alredy done this) and the ul whit the link disappears, how can I do?
One way this can be accomplished is with JavaScript. I added the id remove-on-click to your link which you want removed, and then created a JavaScript event listener to alter the style of this item when it is clicked. You can see the code working here.
<div class="1">
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
<script>
document.getElementById('remove-on-click').addEventListener('click',function(){
this.style.display = "none";
})
</script>
I did not edit any of your other code, but keep in mind that ul tag should be used with li descendants. If you do not have a li descendant, use another tag, such as a div. Also, you may want to become more familiar with proper naming of class and id attributes, especially in regards to not beginning them with a digit:
https://www.w3.org/TR/CSS2/syndata.html#characters
What are valid values for the id attribute in HTML?
The key consideration to note is that you must write the markup in reverse order.
This is because CSS selectors can only select:
an element itself (or a pseudo-element)
an element's descendant elements
an element's subsequent siblings
It cannot select an ancestor element or (in this scenario) a previous sibling.
Once you have written the markup in reverse order, you can achieve the effect you want using CSS.
Working Example:
#part2,
#part3 {
display: none;
}
#part2:target,
#part3:target {
display: block;
}
#part2:target ~ [id^="part"],
#part3:target ~ [id^="part"] {
display: none;
}
<div id="part3">
<p>This is Part 3.</p>
</div>
<div id="part2">
<p>This is Part 2.</p>
<ul>
<li>Link to Part 3</li>
</ul>
</div>
<div id="part1">
<p>This is Part 1.</p>
<ul>
<li>Link to Part 2</li>
</ul>
</div>
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!
What is better:
<h1>Navigation</h1>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Or:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Is there any significant difference?
nav is a sectioning element and as such, if you have a heading that describes the navigation it should be inside:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav element.
The W3C HTML5 spec provides a near-identical example:
Code Example:
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p>News -
Blog -
Forums</p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li>Index of all articles</li>
<li>Things sheeple need to wake up for today</li>
<li>Sheeple we have managed to wake</li>
</ul>
</nav>
</header>
...
</body>
If you're wondering about accessibility take a look here.
It is best to use a header inside the nav as it is describing the section.
Having the heading inside the <nav> container allows you to more easily style it, and manipulate the nav element as a whole. If you moved the <nav> for instance, you'd likely want the heading to go with it. It just saves work and makes thing simpler to have it inside.
You will be able to style it using:
nav h1 {
style: something funky;
}
Instead of styling all h1 elements or giving it an ID.
The first one is better because the heading should describe what to come, and is not a part of the nav. Just like h1 should not be inside p. It will probably work just fine either way though.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Here is my HTML code:
<nav id="nav">
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Photos
</li>
<li>
Contact
</li>
</ul>
</nav>
what code should I do for changing its background colour?
Your question doesn't provide nearly enough information. However, from your bullet list I can assume you are using and/or tags, like this:
<ul>
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Contact</li>
</ul>
The most efficient way to color the backgrounds of your elements is to use CSS styles. In a CSS file you will want to use a selector to select the elements within your .
ul li {
background-color:blue;
}
This CSS code will change the background color of each element. However, if you have multiple lists and don't want them all to have a blue background, you must give your a class in your HTML file.
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Photos</li>
<li>Contact</li>
</ul>
Then in your CSS code you will be able to target the "nav" class directly.
#nav li {
background-color:blue;
}
Hope this helps. In the future, provide more details about your code and question.