Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>list</title>
<style type="text/css">
li.mainList:hover li.childList{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="mainList">111</li>
<li>111
<ul>
<li class="childList">222</li>
<li class="childList">222</li>
</ul>
</li>
<li>111</li>
<li class="mainList">111</li>
</ul>
</body>
</html>
I want to change color my nested list items whenever user hover on first child and last child of main list. Why my above code does not work and what is your suggestion with first-child (last-child) selectors?
Because you are not correctly using the selectors. From your markup, this should work.
li.mainList:hover + li li.childList{
color:red;
}
Here is the working fiddle.
Why my above code does not work
Because you have used a descendant combinator and the nested list is not a descendant of the element being hovered.
what is your suggestion with first-child (last-child) selectors
To not use them.
You can't walk back up the tree to get a hover on the last child to affect the descendants of one of its previous siblings using CSS.
Use JavaScript (a mouseover listener) instead.
Related
Lets say we have an <ol> and <li> nested inside a parent <li> of a parent <ol>.
It creates something like this :
<html>
<body>
<ol class="ol1">
<li>li 1 - ol 1<ol class = "ol1-1"><li>li 1 - ol 1.1</li></ol></li>
</body>
</html>
Is there any way to apply css styles in the list numbers (not the content) separately,i only know how to get both of them using pseudo css element:before but not separately,for example OL-1 to be color:blue and OL-1.1 to be color:red
Try defining a seperate class for each level of "ol" element then apply the css to the "class li::marker".
<html>
<style>
.ol1 li::marker{
color:blue;
}
.ol1-1 li::marker{
color:red;
}
</style>
<body>
<ol class="ol1">
<li>li 1 - ol 1
<ol class = "ol1-1">
<li>li 1 - ol 1.1</li>
</ol>
</li>
</ol>
</body>
</html>
you mean someting like:
.ol1 > .ol1-1 li{
color:red;
}
this makes every "li" after .ol1-1, that's a children of .oli1 color red. Or at least it should.
~ is for the following sibling selector.
How could il select the class .content in reference to the class .select ?
HTML
<ul>
<li> <a>content</a> </li>
<li> <a class="select">selected li</a> </li>
<li> <a>content</a> </li>
</ul>
<div class="content">
selected content
<div>
CSS (not working)
ul > li > a.select ~ .content {
/* something */
}
It's unfortunately not possible with CSS, but you could use JQuery, i.e. something like
<script type="text/javascript">
$(".selected").parent().parent().siblings(".content").css("color", "red");
</script>
$(".selected") you start at 'a' tag
.parent() move to parent 'li'
.parent() move to parent 'ul'
.siblings(".content") matches all siblings of the 'ul' you are currently at with class #content'
.css("color", "red") do whatever fancy css you like ;)
There's currently no way in CSS to select the class .content in reference to the class .select.
However if you change your markup a little you can do something similar to what you're trying to do using the target pseudo-class
FIDDLE
Thank you so much everyone. As previously stated the problem was where I had the CSS code. I didn't have the dot/period prefixing ul and li originally, that was a desperate last-minute act. :-)
I do read W3S, StackO/f, HTMLDog, Tizag and all of the other great sites b4 asking questions. But you're stuck w/me now.
Another question. Should I open a New question? This question refers to the original block of code.
My line color doesn't change. But if I code each individual line, the color changes. I would like to know how to change the color in the li CSS block.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Why I love learning HTML - Part 2</TITLE>
</HEAD>
Colors
<BR>
My favorite colors are:
<BR>
<UL>
<LI><FONT SIZE=2 COLOR="red" >Navy</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Olive</FONT>
<LI><FONT SIZE=2 COLOR="red" >Purple</FONT>
<LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Teal</FONT>
</UL
</BODY>
</HTML>
This is my 5th week of HTML&CSS class. The stack overflow website always pops up when I Google a question. So I joined and I have a question. My CSS code shows up on my web page as code. The UL and LI part of the code does not read the classes .ul and .li. I have looked at the code for a long time and cannot figure out what is wrong. Thanks for your help
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
</style>
</head>
<body>
.ul {
margin:0;
padding:0;
color:#ff0000;
}
.li {
display:inline;
padding:0;
margin:0;
color:#000099;
}
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
<h1>can't find the errors</h1>
</body>
</html>
First of all, welcome to the world of HTML and CSS. I'll jump straight into things by saying that there are a couple of issues with the code you've posted up:
1. Putting your CSS in the right place
Your CSS code currently isn't placed within your <style type="text/css"> declaration at the top, it's placed within the document's body. This will output as text to the screen.
To fix this, simply move it all into that style element in your head:
<head>
<style type="text/css">
/* Styling goes here. */
</style>
</head>
(For rendering purposes, styling should never be declared outside of the document's head either.)
2. Fixing your selectors
Once you've fixed that, however, your selectors will still not target your elements. This is because you're prefixing your CSS selectors with a . (.ul and .li). A . prefixes the class selector.
To target your ul and li elements, you'd simply remove the .:
ul { ... }
li { ... }
3. Validating your HTML
On a side note, you need to pay attention to your closing HTML tags. Your closing </a> tags must be within your <li> tags. Change:
<li>...</li>
To:
<li>...</li>
you need to contain your CSS in
<style> </style>
Also, make sure you put it in the head where possible
Because CSS selector start with '.' is for class.
Use ul, li instead, and include ur css style in <style></style>.
That's because you put the CSS "code" as text in the HTLM instead of inside your empty <style> tag.
The correct way to do inline styling is to use the style attribute in your markup:
<ul style="margin:0; padding:0; color:#ff0000;">
The above is not however recommended because as the number of pages grow in your site, with lots of inline styling, maintenance becomes a nightmare.
What you are trying to do is embedded styling and it is not working because you need to have the styling directives inside the tags.
BTW it's always better idea to use ids. As things stand, this styling will be applied to every unordered list in your application which is often not what you want. If you gave the list an id, then you could reference it like this #myId {} and then the styling would be confined to that list.
Finally, the recommended practice is to use external style-sheets, using the HTML link tag:
<link rel="stylesheet" type="text/css" href="styles.css" />
Here is your original code with the embedded styling in the correct place:
<head>
<meta charset="utf-8" />
<title>Homepage</title>
<style type="text/css">
ul {
margin:0;
padding:0;
color:#ff0000;
}
ul li {
display:inline;
padding:10;
margin:0;
color:#000099;
}
</style>
</head>
<body>
<!-- Site navigation menu -->
<ul>
<li>Home page</li>
<li>Education and Experience</li>
<li>Publications and Committees</li>
<li>Links</li>
</ul>
</body>
<style type="text/css">
#featured a:first-child
{
background-color:yellow;
}
</style>
<div id="featured">
<ul class="ui-tabs-nav">
<li><span>test 1</span></li>
<li><span>test 2</span></li>
<li><span>test 3</span></li>
<li><span>test 4</span></li>
</ul>
</div>
I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.
They are all highlighted because each a is the first-child of its parent li
What you probably want is something like:
#featured li:first-child a
{
background-color:yellow;
}
Because all anchors are the first child of their parents. You need to:
#featured li:first-child a {
background-color: yellow;
}
If you always have a list I would prefer the CSS solution like #powerbuoy and #danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/
The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.
Nevertheless when list-styling is your only task here then I would recommend the CSS solution.
<div id=menu>
<ul>
<li class="section-title">auto-text1</li>
<li class="section-title">auto-text2</li>
<li class="section-title">auto-text3</li>
</ul>
</div>
How can I give special treatment to auto-text3 through css?
See section 6.6.5.7. of the CSS3 - future - proposal:
:last-child pseudo-class
Same as :nth-last-child(1). The :last-child pseudo-class represents an element that is the last child of some other element.
ul > li:last-child { }
http://www.w3.org/TR/css3-selectors/#last-child-pseudo
(In your example </menu> probably is meant to be the closing </div>.)
For the time being I guess it's still best to use classes marking the first and last list element, or simple Javascript on your #menu id.
You could use the :nth-of-type() pseudo-class selector:
#menu > ul > li.section-title:nth-of-type(3)
This will select the third element of all li elements with the class section-title.
Just to clarify the other answers, there aren’t (currently) any CSS selectors that let you select an element based on its content.