<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.
Related
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.
This question already has answers here:
Should ol/ul be inside <p> or outside?
(4 answers)
Closed 6 years ago.
I'm revising for my exam, going over answering some past questions without the markscheme. I am confused on this:
For the following rule, explain the effect and which elements will be affected:
p ul li {
color:blue;
}
I wrote up some HTML on JSFiddle: http://jsfiddle.net/2nkmzgv2/
It's here anyway:
<p>
<ul>
<li>Should this be blue?</li>
</ul>
</p>
So nothing happens to the text. I would have thought it changes blue, but is nothing actually meant to happen and the purpose of the question was to throw you off or is my syntax/method wrong in the HTML content?
It's because ol/ul items aren't allowed inside of p elements.
Should ol/ul be inside <p> or outside?
Seems like a trick question for your exam then. Most likely you will want to brush up on the HTML spec since the question isn't truly based on CSS knowledge alone.
You are getting the described behavior because <p> cannot contain block-level elements such as <ul> or <ol>. The browser (e.g., Chrome) knows this is not possible and thus try to handle your illegal structure by placing your block element in between two paragraphs:
Because of this, the rule you have declared for that li does not apply.
p ul li {
color: blue;
}
<p>
Hello
<ul>
<li>I'm never blue.</li>
</ul>
Goodbye
</p>
Other trick questions could be:
a a { color:red }
p p { color:blue; }
The HTML is invalid since you cannot have list inside paragraph tags.
That means that the CSS will also never be applied to the li element. The correct CSS would be just:
ul li {
color: blue;
}
with this HTML:
<ul>
<li>Should this be blue?</li>
</ul>
Updated JSFiddle
"List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list." by HTML specification
I have multiple nav ul li a that i need to style different and I have no good way of doing this. I've looked around the net for quite a bit but i do not understand how to do this without using class="" in every element. My code is below. There must be a better way of doing this? Like all children that has class="loginmenu" should be like x and all children of class="dropdownmenu" should be like y. Even if they are the same element.
<nav class="loginmenu">
<ul class="loginmenu">
<li class="loginmenu">
<p>Login</p>
</li>
</ul>
</nav>
<nav class="dropdownmenu">
<ul>
<li class="gigs">
<p>Gigs</p>
<p class="subtext">Shows & Gigs</p>
</li>
<li class="music">
<p>Music</p>
<p class="subtext">Tracks & Sets</p>
</li>
<li class="booking">
<p>Booking</p>
<p class="subtext">Booking & Contact</p>
</li>
CSS:
nav.loginmenu {
position: absolute;
}
li.loginmenu{
font-size: 25px;
margin-left: 1200px;
} and so on...
You can use nav.loginmenu <element>.
nav.loginmenu li {
font-size: 25px;
margin-left: 1200px;
}
For more information see the documentation of CSS selectors or try CSS Selector tester.
CSS rules can represent a hierarchy. For instance, the following means: "Apply this rule to all li elements that are inside a nav element with class loginmenu")
nav.loginmenu li {
..
}
It's commonplace for me to add classes to one root element that has no rules of its own, but for which having that class affects behavior of its children.
When sharing functionality, it is also common to add one class to multiple elements, or multiple classes to one element (separated by spaces) if it simply represents certain behavior (eg, applying a margin to all list elements to give them a "tabbing" look)
Additionally, many properties (most of the font-... properties for instance) are inherited from parent to child unless they're overridden at a lower level, so there's no need to repeat those for further descendants.
Not exactly sure what you are trying to do here. But if I'm interpreting correctly, you want to target different elements within each <nav> element? If so you can add an id which should be unique (not repeated) to your <nav> element then target the element like so:
html:
<nav id="loginMenu">
...
</nav>
css:
#loginMenu li {
font-size: 25px;
margin-left: 1200px;
}
Or you can use Genhis answer.
I have a css style defined in a .js file for <li> tag in a page. I am trying to modify the html page without changing the existing css and js files and layout of the page. I want to insert the following code:
<div style="float: left; width: 18%; bottom: 6.4%; border-right-style: groove; border-right-width:2px; border-top-style: groove; border-top-width:2px; border-bottom-style: groove; border-bottom-width: 2px; padding-right: 0%; padding-top: 0%; margin-right: 0%; margin-top: 0%; position: fixed;">
<ul class="MenuBarVertical">
<li>Text 1</li>
<li>Text 2</li>
</ul>
</div>
But every <li> tag in the html page automatically picks the style from the existing css file. I don't want this for some <li> tags. I want a different css for <li> tags. Is it possible that I enclose those <li> tags under a <div> tag and add a class to the div tag and define a css specific for it which can override existing css for every <li> tag? I can override existing css by defining style in the <li> tag like <li style="...">. It works fine, but I have to add style in every <li> tag. I want to know if I add id or class to the parent tag and write css for it somewhere in the page itself so as to override the existing style from .css file. What will be the code? How to declare such css in the section? or should I declare in body?
I hope I am able to explain my problem. I want to know the possible ways to override css style for a tag.
To override the old rules, you need to define elements as specific as possible, like this:
div ul.MenuBarVertical li {...}
Even better if you can put an id to the div or ul elements (if you have a single such element on the page).
If nothing else works, you can use the !important parameter, but it's strongly not recommended.
There are several possible solutions:
1) use classes to define the properties you want. e.g.
<ul class="MenuBarVertical">
<li class="other">Text 1</li>
<li class="other">Text 2</li>
</ul>
and then declare the styles you want to have on those lis. Declare it accordingly in your css file or to insert the ruleblock for this class with javascript, you can create a styleblock on the fly and add it to the head or use an existing one and append this rule.
2) Include an inline style block:
<ul class="MenuBarVertical">
<style scoped>
.MenuBarVertical li{
/*declarations here*/
}
</style>
<li>Text 1</li>
<li>Text 2</li>
</ul>
The scoped attribute is rather new and not recognized by browsers other than firefox and chrome, that's why I added the .MenuBarVertical part to further specify the lis you want to style (increase specificity) and it will still work. Once scoped is recognized in all browser you could drop this and just write li{...}.
Please don't:
a) use inline styles - bad, always try to avoid this!
b) use !important - even worse, dont do this either!
I have a page with a default CSS file. In this page I have:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<br>
<ul>
<li>B1</li>
<li>B2</li>
</ul>
<br>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
<br>
I can view the default CSS but I cannot amend
ul {
paddind-left:15px;
}
what I want to do is to exclude only B1 and B2 from the default css. A and C should still have the default property but B1 and B2 should have PADDING-LEFT:0PX;.
I have used (cssreset-min.css) but all the css was eliminated. Any help?
Give the parent ul a new class:
<ul>
<li>A1</li>
<li>A2</li>
</ul>
<ul class="newClass">
<li>B1</li>
<li>B2</li>
</ul>
<ul>
<li>C1</li>
<li>C2</li>
</ul>
Then do:
ul.newClass {
paddind-left:0px;
}
This will work in all browsers. If you're not concerned about that, use #Andy answer.
if you want to apply for this 3 named list..simply use div with different id for B1,B2....but if you want to apply for an huge list it would be difficult
If I understand right, ul li:nth-child(3), ul li:nth-child(4) { padding-left: 0; } should work
The nth-child selector targets specific children, in this case the 3rd and 4th
Edit: After seeing your edit, the new code that you will need to do is: (I will use #container as the name for your containing div, whatever that is)
#container ul:nth-child(2) li { padding-left: 0; }
You can try something like this :
http://jsfiddle.net/4X62Y/
Here's another solution without changing the HTML:
ul:not(:nth-child(3)) {
padding-left:15px;
}
Example
This will probably not work in all browsers, you'll need to change the HTML for that and use the answer provided by #Alex Thomas .