so im building a webpage currently, and as a request every menu has to have a different color. but im having a but of a struggle figuring out how i target the individual list item.
heres the structure:
<nav>
<ul>
<li>red</li>
<li>blue</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
</ul>
</nav>
the items have some padding and borderradius but i can't figure out how i give the different items a different backgroundcolor the easiest way.
Please help me ;)
thanks in advance.
If it is fixed then you can achieve like below using nth-child selector.
ul.test li:nth-child(1)
{
background:red;
}
ul.test li:nth-child(2)
{
background:blue;
}
ul.test li:nth-child(3)
{
background:orange;
}
ul.test li:nth-child(4)
{
background:yellow;
}
ul.test li:nth-child(5)
{
background:green;
}
DEMO
I think a better solution may be to avoid having a <ul> in the <nav>, then style anchor links directly. You avoid having styles for the link items sprawled over multiple style selectors (ul, li, a), and the markup is much cleaner.
<nav>
Home
About
Contact
Whatever
</nav>
The CSS is also short, semantic and easy to understand without guessing:
nav > a {
display: inline-block; /* or block, depending on design */
vertical-align: top;
padding: 20px; /* here rather than in <li> */
margin: 10px; /* here rather than in <li> */
border-radius: 5px; /* here rather than in <li> */
color: white;
text-decoration: none; /* remove default underline */
}
nav > a[href="home.html"] {
background-color: red;
}
nav > a[href="about.html"] {
background-color: green;
}
nav > a[href="contact.html"] {
background-color: blue;
}
nav > a[href="whatever.html"] {
background-color: violet;
}
Personally, I think this is better than using nth-child, especially if you add nav items in between other nav items later on. Although nth-child works, it is not entirely clear which background is being controlled for which link.
To style the nth item, use the following CSS:
li:nth-child(2) {
background-color: #f00; /* Whatever you want */
}
Have a look at CSS Selector Reference The :nth-of-type(n) and :nth-child(n) part
Related
I had to Create a working HTML/CSS for the following nestes list
root
child1
child11
child2
child21
child22
child3
child31
So for this I created the following
HTML
<ul class="list-view">
<li>
<ul><li>Chlid11</li></ul>
</li>
<li>
<ul>
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li>
<ul>
<li>Chlid31</li>
</ul>
</li>
</ul>
Now How will I be able to apply CSS to the leaf parent and root node .
I have to make Leaf to green , parent to red and root should be like parent but with underline
Here Leaf are
Child: 11 , 21, 22 , 31
Parent: the three li
root will be :the first ul
This was a question asked to me in an Interview I am just trying to solve it
Css has to be dynamic . I mean I was not suppose to add classes directly saying what is leaf and what is root .
Something like this
Jsfiddle
UPDATE
CSS
.list-view> li:first-child{
color:red;
text-decoration: underline;
}
.list-view> li ul li {
color:red;
}
.list-view> li ul li ul li{
color:green;
}
I am not able to make just the root node underline
Thanks
I am going to take a stab in the dark, so please don't shoot me if i jumped the gun. But here is my understanding of what he is talking about.
<ul class="root">
<li class="parent">
<ul class="leaf">
<li>Chlid11</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
<ul class="leaf">
<li>Chlid31</li>
</ul>
</li>
</ul>
CodePen for example
first of all, your markup does not make very much sense to me. Nesting ul's inside li's is not very useful when the li's do not contain any other content. I suppose your markup should look more like this:
<ul>
<li>
<span>Root</span>
<ul>
<li>Parent</li>
<li>Parent
<ul>
<li>Leaf</li>
<li>Leaf</li>
</ul>
</li>
</ul>
</li>
<li>Root</li>
</ul>
When it comes to targeting each level with css, you have a number of options. Adding classes to each level may seem the most straight forward, but it can be harder to maintain, and it is easier to make mistakes. Others have already demonstrated this technique, so I'll limit myself to a few alternatives:
option 1a:
ul { /* root + parent + leaf */ }
ul ul { /* parent + leaf */ }
ul ul ul { /* leaf */ }
option 1b:
li { /* root + parent + leaf */ }
li li { /* parent + leaf */ }
li li li { /* leaf */ }
option 2:
ul > li { /* root + parent + leaf */ }
ul > li > ul > li { /* parent + leaf */ }
ul > li > ul > li > ul > li { /* leaf */ }
That is basically it I guess, though you could come up with some variations. Option 1a and 1b are equivalent. Option 2 is more specific, and can be useful when trying to overwrite certain styles. It is considered good practice to keep your selectors as little specific as possible though. This way you can overwrite them easier later on, and your selectors do not get ridiculously long. It just keeps your code easier to read and maintain, so I would definitely go for option 1 in this case.
Note that this technique requires you to overwrite your styles. The styling you requested could ie. be achieved by doing something like this:
li {
color:red;
}
li span {
text-decoration: underline;
}
li li li {
color:green;
}
The pseudo classes you speak of in the comments (:nth-child, ...) are irrelevant here. They are meant for distinguishing between siblings, not for parent-child relations.
edit:
the text-decoration property is a bit tricky to overwrite. Have a look at the specs on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.
To solve this, you have to make sure the element with the underline is not the parent of the rest of your tree. Th easiest way is to put it in a span and apply the underline only to that:
http://jsfiddle.net/r616k0ks/3/
(I have updated my code samples above accordingly)
Using some specific selectors you can create almost any selection without using classes on the child elements.
I don't know if this is what you're getting at:
/* Root */
.list-view { background: grey; }
/* First level li's */
.list-view > li { background: red; }
/* First level of ul's */
.list-view > li > ul { background: orange; }
/* Second level of li's */
.list-view > li > ul > li { background: purple; }
/* Second level of li's, first element */
.list-view ul > li:nth-child(1) { background: green; }
/* Second level of li's, all other elements */
.list-view ul > li:nth-child(1n+2) { background: blue; }
See link https://jsfiddle.net/6d3g3zLm/
If not, feel free to elaborate on your question.
Have you tried adding classes to your html?
https://jsfiddle.net/w7tx52L5/
HTML
<ul>
Root
<li class="parent">
Parent1
<ul class="child"><li>Chlid11</li></ul>
</li>
<li class="parent">
Parent2
<ul class="child">
<li>Chlid21</li>
<li>Chlid22</li>
</ul>
</li>
<li class="parent">
Parent3
<ul class="child">
<li>Chlid31</li>
</ul>
</li>
</ul>
CSS
.root {
color: red;
text-decoration: underline;
}
.parent {
text-decoration: none;
color: red;
}
.child {
color: green;
}
Edit
from your comment it appears you need to use :nth-child selectors. That wasn't clear from your original question. try this css -
ul {
color: red;
display: inline-block;
width: 100%;
text-decoration: underline;
}
ul li {
display: inline-block;
width: 100%;
text-decoration: none;
color: red;
}
ul li:nth-child(odd) > ul li:first-child {
color:green;
}
ul li:nth-child(even) > ul li {
color: green;
}
The workaround of display: inline-block and width:100% is because text-decoration affects all nested elements as well. http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Add classes to the list elements as Geoffrey has shown in his answer. Then apply styling to the classes as you would any styling. If you don't know CSS or anything about how to style, I would suggest researching a little more before you ask these kinds of questions, as this stuff is relatively easy to learn if you put some time and effort into it. http://www.w3schools.com/css/
Html
<ul>
<li class="first active">Test</li>
<li class="second">Test</li>
</ul>
CSS
ul li {
padding: 10px
}
.first:hover {
background-color: red;
}
.second:hover {
background-color: grey;
}
.active {
}
I want to display .active item with same state as :hover. My point here to inherit li colour for active items.
Is this any way to do it?
http://jsfiddle.net/o3c6js03/
What you're asking is not possible; the inherit value sets a property to be the same as the corresponding property of the parent element.
If you're writing out individual styles for the :hover state of each li anyway, then simply add the .active class to the same rule - CSS rules can have multiple selectors, you just need to separate them with commas.
For example:
ul li{
padding:10px
}
.first:hover,.first.active{
background-color:red;
}
.second:hover,.second.active{
background-color:grey;
}
Maybe you want to achieve this:
.first:hover,
.first.active {
background-color: red;
}
.second:hover,
.second.active {
background-color: grey;
}
I have been trying to create a navigation bar for a website I am making, and I want each button to display a difference colour when highlighted. I have used <ul> to create the navigation bar. The question is, is there a way to use the "a:hover {background:#;}" as inline CSS on a specific element?
I have tried giving each <li> or <a> an id and then creating references to them in the internal style sheet, but can't get it to work. Below is what I have so far;
#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px}
#menu ul {margin:0;padding:0;}
#menu li {float:left;display:block;min-width:110px}
#menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;}
#menu a:hover {background:#5D80B0;}
...
<div id='menu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'>XML</a></li>
<li><a href='#'>SQL</a></li>
<li><a href='#'>Java</a></li>
<li><a href='#'>C#</a></li>
</ul>
</div>
Just so your aware, I have been using html and CSS for all of 1 week. So I apologise if this is a stupid question. Thanks.
That's completely impossible; sorry.
Instead, you can create a CSS class for each color and apply the appropriate class to each link:
#menu a.red:hover { background: red; }
If you use :nth-child(X) pseudo class, you can do this without adding a class to every new li you add. For this, I had to move the background-color to li and also added a few other CSS properties, nothing much.
This will be your CSS for adding color:
#menu li:nth-child(1):hover { background: red; }
#menu li:nth-child(2):hover { background: blue; }
#menu li:nth-child(3):hover { background: purple; }
#menu li:nth-child(4):hover { background: yellow; }
#menu li:nth-child(5):hover { background: pink; }
DEMO
+ :nth-child
You could achieve this with jquery :)
$(document).ready(function() {
$('a').hover(function(){
$(this).parent().css({background-color: 'yellow'});
});
});
Inline javascript
<a href='index.html' onmouseover='this.style.textDecoration="none"' onmouseout='this.style.textDecoration="underline"'>Click Me</a>
In a working draft of the CSS2 spec it was declared that you could use pseudo-classes inline like this:
<a href="http://www.w3.org/Style/CSS"
style="{color: blue; background: white} /* a+=0 b+=0 c+=0 */
:visited {color: green} /* a+=0 b+=1 c+=0 */
:hover {background: yellow} /* a+=0 b+=1 c+=0 */
:visited:hover {color: purple} /* a+=0 b+=2 c+=0 */
">
</a>
but it was never implemented in the release of the spec as far as I know.
http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules
I'm not an advanced user of CSS, but I have a decent working knowledge i suppose. I'm tryin to make an unordered list that uses different icons for each list element. I would also like the background colour of the list element to change upon hover.
Is there a way to do this through CSS, or would you just include the icon image within the list element (like below)?
<li><img src="voters.jpg">Voters</li>
Using the list-style-image on the ul level makes all of the icons the same, and I haven't been able to figure out another way. Most examples I've found teach you how to use images in a list, but only if the bulleted images are the same. I'm definitely open to suggestions and improvements on the way I'm trying to do this.
thanks
<div class="content-nav">
<ul>
<li class="instructions">Instructions</li>
<li class="voters">Voters</li>
</ul>
</div>
.content-nav {
font-size:12px;
width:160px;
z-index:0;
}
.content-nav ul {
padding:0 20px;
margin:30px 0;
}
.content-nav li {
padding:5px;
margin:5px 5px;
}
.content-nav li a {
color:#666;
text-decoration:none;
}
.content-nav li.voters a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.voters a:hover {
background:#0CF;
color:#000;
}
.content-nav li.instructions a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.instructions a:hover {
background:#0CF;
color:#000;
}
You could add background images on each list element, and use padding to push the text away from it.
<ul>
<li class="li1">List 1</li>
<li class="li2">List 2</li>
</ul>
.li1 {
background:url('li1.gif') 50% 50% no-repeat no-repeat;
padding-left: 5px;
}
.li2 {
background:url('li2.gif') 50% 50% no-repeat no-repeat;
padding-left: 5px;
}
Just make sure the padding-left is the same size as the image (or a bit larger if you want spacing)
Using CSS3's :nth-child() selector, does not require additional markup on each <li> element:
Live Demo
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS:
ul li:nth-child(1) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png');
}
ul li:nth-child(2) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png');
}
ul li:nth-child(3) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png');
}
Browser Support: IE9+, FF3.5+, SA3.1+, OP9.5+, CH2+
I would suggest to use the icons as background-images for each list element. With this approach you can easily position the "bullet points" also (especially horizontal positioning).
You try to set the list-style-image property on an a element. Try setting it on the li element instead.
If you want to use different icons for each list, than give each list an unique name and use background-image and position it appropriately in CSS.
Just use the image in content property of your pseudo-element ::before:
li.item1::before {
content: url(/Images/icon/item1-icon.svg);
display: inline-block;
width: 1em;
margin-right: 6px;
margin-left: -1em;
}
You obviously need to have a class for each li with different image.
/* Cờ cho language switcher */
.widget_polylang ul {
list-style: none;
}
.lang-item-en:before {
background: url(/wp-content/uploads/2020/03/us.png) no-repeat 0;
padding-left: 20px;
content: "";
}
.lang-item-vi:before {
background: url(/wp-content/uploads/2020/03/vn.png) no-repeat 0;
padding-left: 20px;
content: "";
}
i code for Polylang's language switcher
I am new to web programming. I want to create buttons in html and when you hover over it, it shows a drop down of options for pages you want to go to.
Any help is appreciated. Thanks!
Here's a very basic example of what you're trying to achieve. It's actually not a button, but a styled list. Since you're new to HTML, I'll post the entire code, so that you can copy and paste it:
#button {
/* Box in the button */
display: block;
width: 190px;
}
#button a {
text-decoration: none;
/* Remove the underline from the links. */
}
#button ul {
list-style-type: none;
/* Remove the bullets from the list */
}
#button .top {
background-color: #DDD;
/* The button background */
}
#button ul li.item {
display: none;
/* By default, do not display the items (which contains the links) */
}
#button ul:hover .item {
/* When the user hovers over the button (or any of the links) */
display: block;
border: 1px solid black;
background-color: #EDC;
}
<body>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</body>
Sounds like you're looking for some simple CSS-based dropdowns - I recommend what's called a "Suckerfish" style dropdown. This link uses several items for a horizontal menu, but it can easily be adapted to one link.
http://htmldog.com/articles/suckerfish/dropdowns/