I'm working on CSS and i have a problem with colouring certain parts of a work. For example:
<ul id="nav"><li>cats</li></ul><ul><li>dogs</li></ul>
I want to color the part with 'cats'.
I use
li#nav{color: green;}
to make "cats" green, but it is wrong.
How would that be?
The problem, is as I now understand is, that you want to only color the text and not the dot. For that case this is the solution:
1. So in CSS to achieve green cats and black (default) dot, as asked:
/* if you want to style every <li> element that is inside <ul id ='nav'> */
ul#nav li:first-line {
color: green;
}
or
/* if you want to style every <li> element where the parent is a <ul id='nav'> */
ul#nav > li:first-line {
color: green;
}
2. In case you would like to have green dot and green cat, then remove :first-line
ul#nav li {
color: green;
}
3. In case you would like to have red dot and green cat, then do
ul#nav li {color: red;}
ul#nav li:first-line {color: green}
Note: you can also just use #nav li, instead of ul#nav li, but that will color <li> tag inside <ol id='nav'> and <menu id='nav'> tags too.
Note 2: :first-line is a CSS Pseudo-element (in case you'd like to search for it)
If I'm getting your question correct, then your css was wrong
you need to do this
<ul id="nav">
<li>cats</li>
</ul>
<ul>
<li>dogs</li>
</ul>
#nav li {color:green}
Related
I was making a menu list and would like to have a color change on the tab of current active page.
.menu>li>a {color: red;}
.menu>li>a.active>a {color: blue;}
<ul class="menu">
<li class="active">active page</li>
<li>another page</li>
<li>other page</li>
</ul>
(JS Bin)
In the code above, I want active page tab to be blue. However, I can't use .menu>li>a.active>a to change the color.
I remember that I can select classes like .foo.bar for a .foo under a specific condition .bar. However, like example above, it seems that I can't do it if there's child element, like .foo>a.bar>a.
Is this correct? Also, is there a better strategy for this kind of condition?
Use
.menu li.active a{
color: blue;
}
.menu li a{
color: red;
}
.menu>li>a {color: red;} .menu>li>a.active>a {color: blue;}
Your above CSS code is wrong, that's why it's not working.
You are having class="active" on <li> element, so you should use this css -
.menu>li>a {color: red;}
.menu>li.active>a {color: blue;}
Also .foo.bar css selector will work on elements having both the class, for example -
.foo.bar {
color: dodgerblue;
}
<div class="foo bar">Multiple Class Element</div>
Whats the difference of use CSS like this:
.mainHeader nav ul li {.....
compared with just this:
.mainHeader li {.....
It works fine with just the latter alternative. Since I don't have any other nav or ul in the mainHeader, I guess it's ok to just use the latter one?
What if you have HTML like this?
<div class="mainHeader">
<nav>
<ul>
<li>Menu item</li>
<li>Menu item
<ul><li>With submenu</li></ul>
</li>
</ul>
</nav>
</div>
Now, if you wanted to only style a "Menu item" and submenu items separately, the only way to do so specifically is with the following selectors:
.mainHeader nav>ul>li { /* menu item */ }
.mainHeader li>ul>li { /* submenu item */ }
Using the > combinator is important here, to ensure you are styling the right element. .mainHeader li alone will not do.
As long as you will never include any other matching elements, it's okay (where okay means "it will work"). A good approach is to add a class to your ul and select it that way:
ul.my-menu li {
/* CSS styles */
}
And - by the way - I guess mainHeader is not the tag name. If it is an identifier, you must use #mainHeader and .mainHeader if it is a class. (You changed it)
<div id="mainHeader">
<ul><li>facebook</li><li>twiiter</li></ul>
<div id="nav">
<ul><li>Home</li><li>About</li><li>Information</li><li>Contact</li></ul>
</div>
</div>
So #mainHeader li{....} will do all li in div
and #mainHeader nav ul li {....} will overwrite for the nav bar
Adding a class to each ul or adding > will make the code stronger when it is edited in future like suggested above.
The difference is only one thing, you can list any type of element next to .mainHeader for example, #mainHeader a p code div nav span ul li. This will give all of these elements with an ID of mainHeader the CSS you place in the { } for that element.
I'll give you an example.
HTML:
<div class="mainHeader">This text is black because "mainHeader".</div>
<a class="mainHeader" href="#">This text is black because "mainHeader".</a>
<p class="mainHeader">This text is black because "mainHeader".</p>
<nav class="mainHeader">This text is black because "mainHeader".</nav>
<span class="mainHeader">This text is black because "mainHeader".</span>
CSS:
.mainHeader div a p nav span {
color: #000;
}
Update(1): Please understand that doing this is recommended if you are going to give multiple elements the same aspect for a specific thing. An example of this usage, say you want div a p to have the same color, you would achieve this by div a p { color: #000; /* color your wanted */ }
Warning... not the sharpest tool in the CSS toolbox here...
I'm trying to write a tree control using ULs... and stuck on a CSS issue. To simplify the question, I boiled down the example to something that might not make sense, but the essence of the CSS issue is as simple as possible.
Consider this html:
<ul>
<li><div>should be green :)</div>
<ul>
<li><div>should be green :)</div></li>
<li><div>should be red :)</div></li>
</ul>
</li>
<li><div>should be red :)</div>
<ul>
<li><div>should be green !!!!!!!!!!!!</div></li>
<li><div>should be red :)</div></li>
</ul>
</li>
</ul>
and this CSS:
ul li{
background-color: green;
}
ul li:last-child div{
background-color: red;
}
The one item that says:
<li><div>should be green !!!!!!!!!!!!</div></li>
Appears red instead of green!!!!!
Since the div that contains it is contained in an LI that is NOT the last in the list, I expected it to use the normal selector instead of the last-child selector
Here is a fiddle for your reputation point seeking pleasure!
http://jsfiddle.net/dmd1214/5Vm58/16/
You need to use Child selector for selecting the last element(div) of li.
ul li:last-child > div{
background-color: red;
}
JS Fiddle
Make your descendant selector a child selector:
ul li:last-child > div {
background-color: red;
}
That way, it matches only the <div> elements that are children of that last <li> element.
Demo: http://jsfiddle.net/5Vm58/20/
It's because you are targeting a div with your :last-child usage.
ul li {
background-color: green;
}
ul li:last-child {
background-color: red;
}
Fiddle: http://jsfiddle.net/5Vm58/19/
<li class="red">
<p>Home</p>
</li>
In the CSS, I'd like the bg color of the li element to change, BUT the color of the text has to change too. The problem is, even after I hover of ther li element, I have to go further and actually touch the text in order for it's color to change.
I'll be amazed if this can work.
First remove <p> tag
li.red > a:hover {
color: red;
}
li:hover {
background-color: blue;
}
li:hover p,
li:hover a {
color: yellow;
}
There are 2 things you should take into account:
<p></p> is a block level element. It is not used inside inline-element, in this case, <li></li>
Simply make your <a></a> tag to be a block level element.
So your code should be like this:
<ul>
<li class="red">
Home
</li>
</ul>
Then you could come up with the CSS like this:
.red a:hover {
padding: 10px 20px;
display: block;
background-color: #9900;
color: #FFFFFF;
}
I have a <li> that contains an <a href>
<li>Page</li>
I'd like to change the background color and text color of each <li> item as it's hovered over. I found that the background color is best changed by targetting the li:hover and not the a:hover because the a:hover changes the background of only a small portion of the line (the part that has the <a> text).
li:hover { background-color:green; }
What I'd also like to do is change the font color (that's the <a>). When I do it the first way below, it has no effect on the <a> text color. And when I do it the second way below, I'd have to hover specifically on the <a> for the font color to change, not just anywhere in the <li> bullet line.
li:hover { background-color:green; color:red; } //first way
a:hover { color:red; } //second way
Is there a way with css to change the font color of the contained <a href> when the <li> is hovered over? again, this is what the html markup looks like:
<li>Page</li>
li:hover a { color: red }
:hover documentation.
IE5/6 only support :hover on links, so make sure you're not testing on those browsers.
The way that works on IE6 is to still target the link, but make the link fill the whole of the space inside the <li>:
li a { display: block; }
li a:hover { background-color: green; }