Trying to get an inline list without inserting extra tags between ul and li. I need to do it this way because essentially the app our clients use to create documents has a "one tag for one value selected" thing going on, otherwise it'd be pretty elementary to just sneak a <br/> in there and call it a day.
Please visit http://jsfiddle.net/EkQKL/3/ for a working example of what I'm mucking about with.
I'm using the following CSS:
ul {
margin:0 0 0 2em;
padding:0 0 0 2em;
font-weight:bold;
text-indent:-2em;
list-style-type:none;
}
ul li {
font-weight:normal;
margin-right:1em;
}
ul li:nth-child(n+1){ /*aye, this is the problem*/
display:inline;
}
...but invariably, this seems to just ignore the n+1 part and apply it to every li, which in turn makes the first li snuggle the text in the ul. Argh.
So if I set it to n+2, I get the result I would expect; the first li is 'normal', and the rest all line up horizontally. But setting it to n+1 I would expect it to leave the first element alone, and then apply display:inline to all subsequent li, but it isn't doing that.
I don't have the ability to really use a lot of classes or add extra HTML elements, so I'm kind of at a loss with this one. The only workaround I have is to place the header outside the ul element -- which has other issues with other stylesheets can could be applied to this document.
Is there something about the nth-child thing that I'm just overlooking? Or is this more to do with the display and how it is being applied? It 'feels like' a bug, but I'm not trying to presume too much; I may just not be as smart as I think I am. :)
This is simply because ul li:nth-child(n+1) indicates that it should style every li, that is a child of ul - starting at the first child. Essentially there is no difference between this and ul li {}, because it will style every child regardless. Therefore :nth-child(n+1) wasn't even doing anything.
The reason :nth-child(n+2) works, is because it starts by styling the second li.
Related
I'm using css2 to implement some fixes for IE7 on a website.
So I have to put margin-top:30px and margin-bottom:-30px a <h2> title but I dind't find right selector.
<div class="ui-content">
<h2>Text</h2>
<ul class="ui-listview">
List Items
</ul>
</div>
The fact is that Everytime there is a H2 followed by a UL, I must put those two properties, so I wanted to do a selector with h2 and ul, but I don't know wich ones...
Thanks to help me
You can't select h2s followed by uls but you can do it the other way round. E.g.
h2 + ul { /*your css to style the ul*/ }
So you could put fixes/negative margins or whatever on the ul?
This is a only-ie-7 selector:
IE 7 only
*:first-child+html h2 {}
Anyhow, I don't recommend it because almost no one uses this browser anymore, so neither should you program specially for it.
Everytime there is a H2 followed by a UL, I must put those two properties, so I wanted to do a selector with h2 and ul
As stated by #Spudley and #Coop, you can't select an element that is followed by another element (except rare cases with series of li or td or th and :nth-last-child() but it's more of a trick).
The closest thing you can do in pure CSS is testing if h2 is followed by (an)other element(s) or not, i.e. if it's not alone with :only-child pseudo.
From MDN:
The :only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
Support is IE9+ so if you want to style this element in IE7 and IE8 too (or in the precise case where it's followed by ul but not p or h3...), you'll need JavaScript or to add a class server-side and style this class.
.ui-content > h2:not(:only-child) {
margin-top: 30px;
margin-bottom: -30px;
}
EDIT:
You can also test if H2 is both the :first-child and the second-to-last child of its parent so it'll be styled if it's followed by whatever element but not if this second element has other siblings (third, fourth one, etc)
.ui-content > h2:first-child:nth-last-of-type(2) {
margin-top: 30px;
margin-bottom: -30px;
}
Simplest code would be ;)
<div class="ui-content">
<h2 class="followed-by-list">Text</h2>
<ul class="ui-listview">
List Items
</ul>
</div>
.followed-by-list {
margin-top: 30px;
margin-bottom: -30px;
}
Other trick that'd mean a complete overhaul of your project (say, for next project ;) ): never set a single margin-bottom to content elements (I mean h2, ul, p, etc. It's OK for div and below "blocks") and always set a margin-top to:
an element (general case) ex: p
if needed, an element coming after another like elt1 + p would have a certain margin-top, elt2 + p another one, etc
Morning Guys,
I have a CSS issue that's driving me up the wall. I have an unordered list with custom bullet images:
.mainTable ul {
list-style-position: inside;
list-style-image: url(../img/bullet_white.png);
line-height: 18px;
color: #335;
}
Now some of these list items contain links and some do not. For the ones that do, I'd like the bullet to change on rollover. Not too tricky you'd think... Here's how I marked it up:
.mainTable ul li a:link {
padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
list-style-image: url(../img/bullet_red.png);
padding-left:2px; // padding changes (moves link text), but bullet's still white
}
Now I've sussed (as the padding changes) that the styling is being applied to the inner link, and not the "li" container. I tried testing:
.mainTable ul li:hover
and the image changes, but it changes for all "li" tags in scope (because that's what I've told it to do), but that's not what I'm after. There must be a simple way of doing this without resorting to js but I'll be buggered if I can figure it out.
Any suggestions? All help (even if it's just "You need to use js you nugget") gratefully appreciated :)
Danny
GOT IT SORTED! (can't answer my own question yet - for some reason...)
Thanks for the heads up guys. The answer is a mixture of the above suggestions. Moving the bullets from the li tags and on to the anchors worked a treat, but the list items without the link got no bullet...DOH!
I then set up another class, "notALink", and stuck my default list styling on it. Here's the Markup if anyone's interested...
.mainTable ul { /* kill formatting on the ul */
list-style-position: inside;
line-height: 18px;
color: #335;
list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
list-style-image: url(../img/bullet_red.png);
}
Works fine - Cheers peeps, you've dug me out of a little hole I was digging myself
Danny
No, there is no way to change parent on child hover in pure CSS (2 or 3). See: Is there a CSS parent selector?
So you have two options:
Use JavaScript
or
Leave list style as empty and add bullets to childs (a or something else). That way, you will change style of a, not li.
This is what I would do;]
or (from Yi Jiang comment)
Add extra class to li elements containing a
What you can do is style the a as display: block and move it to the left (using negative margin) to cover the li:s bullet. Check this fiddle:
http://jsfiddle.net/TG5Lj/
You may need to set a background-color to the a as well if your a:s background-image doesn't completely cover the li:s.
Try applying styling to
.mainTable ul li:hover li
or something like that. It should override the rule for the parents.
EDIT: Sorry, I didn't fully understand your question. It seems to me that it's impossible to do with css as you would have to apply styling to "a li that has no 'a' descendants", which I don't think can be expressed in css selectors. As a walkaround in order not to use scripts I suggest that you change the background of the link and not the bullet image.
I'm having a bit of trouble with inheritance. if you expand the first menu item and mouse over you'll see a grey fly-out with a link in it. the link inside inherits the original styles and I'm not sure how to stop it from taking on those styles. i just want them to be the default link style while inside the fly-out. I've tried selectors but i'm not having any luck. ideas?
I put my code up here: http://pastie.org/3388191
Just use a CSS's child combinator, ul > li to define the styles to your main list items, that way those styles won't be inherited past your second level subnav, like so:
#nav > ul > ul {
background-color: #999999;
height: 299px;
margin: 0;
padding: 0;
width: 652px;
}
Demo: http://jsfiddle.net/kQuGd/1/show/
EDIT
Read your question too fast and didn't see what your real problem was, sorry about that. There's two ways (that I know of) to fix your link problem.
One way is to add the third level menu links to your default style
a, #nav ul ul a {
// YOUR STYLE PROPERTIES
}
a:hover, #nav ul ul a:hover {
// YOUR STYLE PROPERTIES
}
The second way is to assign a class to either the links in the third level menu, or the links in the first and second level menus.
If you assign a class to the third level links, just apply the same styling to that class as your default links.
If you assign classes to the first and second level links instead, and thus remove all link styles like
#nav ul a
your third level links will automatically get the default link style.
The problem is the use of #nav a which applys a styling to all links within #nav
I have built a CSS navigation header, and it's working exactly the way I want in regards to positioning, stylization, all that. This is the CSS that stylizes it:
#header ul {
padding:72px 0 0 0;
text-align:center;
}
#header ul, #header ul li {
margin:0;
list-style:none;
}
#header ul li {
display:inline;
}
#header ul li a {
font-size:17px; color:#69C; text-decoration:none;
display:inline-block;
height:44px;
line-height:44px;
margin:3px 6px;
padding:0 26px;
}
#header ul li a:hover {
background:#69C;
color:#FFF;
}
And this is the list:
<div id="#header">
<ul>
<li>HOME</li>
<li>WHAT WE DO</li>
<li>ABOUT US</li>
<li>GET STARTED TODAY!</li>
</ul>
</div>
Pretty simple stuff (and currently viewable at http://www.pmind.com/staging, but I included the code here for potential future readers).
You may notice in the list, the final li has an ID assigned to it. When I add this rule to the CSS:
#get_started {
color:#3C0;
}
Nothing happens. It was my understanding that A. CSS rules that come later in the CSS document have priority over rules that come earlier, and B. CSS rules used with the ID selector had the highest priority no matter what. But clearly the blue colourization that comes from the earlier CSS rules is still taking priority over colouring the final li green. I tried to make sure I did my due diligence Googling for the solution, but everything I find says that IDs get the highest priority (and this has also been my understanding in practice for everything I've coded before this one issue).
If you were trying to override a selector that didn't have an ID with one that did, your confusion would be spot on.
In this case, though, you're using #get_started (which has an ID) to override #header ul li a which also has an ID in it.
Surely you're thinking that your ID is more specific than the #header ID — and you're not entirely wrong — but that's not how CSS works. It only cares about the number of IDs used in the selector, not which elements those IDs happen to target.
To figure out which of two selectors takes precedence, first count the IDs in each. If one has more IDs than the other, it wins and you're done.
If it's the same number (in this case both have one) move on to the number of classes. Again, if one has more classes than the other, it wins and you're done. In this case, both have zero classes.
So we move on to the number of tag names. Once again, if one has more tag names it wins. And here #header ul li a has three tags in it (ul, li, and a) whereas #get_started has none. You lose. The existing selector wins.
You could work around this with just #header #get_started which now has two IDs, but my preference would be to more clearly describe it as:
#header ul li a#get_started
#header ul li a has a higher specificity than #get_started
You should read the w3c specs on specificity.
EDIT to add:
Just remember that although specificity is commonly written in short-hand as powers of 10, 10 elements will never be more specific than one class, and 10 classes will never be more specific than one id.
E.X.
html body div table tbody tr td ul li a is less specific than .some-link-class
Checkout the excellent video:
Understanding CSS Specificity
can you try this
#get_started {
color:#3C0!important; // this will take the priority
}
Did you try?
#get_started:link {
color:#3C0;
}
I've got a stylesheet that will not, for whatever reason, apply list-style-type to a UL element. I'm using YUI's Grid CSS with their reset-fonts-grid.css file, which I know strips that out as part of the CSS reset.
After calling YUI, I call the stylesheet for the website and in there have a block for UL:
ul {list-style-type: disc;}
I've also tried setting it via list-style but get the same result. I know that the above CSS block is getting read as if I add things like padding or margins those do get applied. The style-type isn't showing up in either Firefox or IE.
The only other CSS I've applied to UL's are in a #nav div but that CSS doesn't touch the list-style-type, it uses the reset that YUI provided, and YUI and the site style sheet are the only two CSS sheets that are called.
I've also got FCKEditor on the admin side of the site and that editor does show the bullet styles so I know it has to be something with the CSS that isn't being filtered by FCKEditor.
You need to include the following in your css:
li { display: list-item; }
This triggers Firefox to show the disc.
and you can also give a left-margin if the reset.css you are using make all margin null :
that means :
li {
list-style: disc outside none;
display: list-item;
margin-left: 1em;
}
Assuming you apply this css after the reset, it should work !
Matthieu Ricaud
If I'm not mistaken, you should be applying this rule to the li, not the ul.
ul li {list-style-type: disc;}
I had this problem and it turned out I didn't have any padding on the ul, which was stopping the discs from being visible.
Margin messes with this too
This problem was caused by the li display attribute being set to block in a parent class. Overriding with list-item solved the problem.
Make sure the 'li' doesn't have overflow: hidden applied.
My reset.css was margin: 0, padding: 0. After several hours of looking and troubleshooting this worked:
li {
list-style: disc outside none;
margin-left: 1em;
}
ul {
margin: 1em;
}
I had this problem and it turned out I didn't have any padding-left on the ul, which was stopping the discs from being visible. The default padding-left for ul elements is 40px.
The and elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em).
(Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists)
All I can think of is that something is over-riding this afterwards.
You are including the reset styles first, right?
Have you tried following the rule with !important?
Which stylesheet does FireBug show having last control over the element?
Is this live somewhere to be viewed by others?
Update
I'm fairly confident that providing code-examples would help you receive a solution must faster. If you can upload an example of this issue somewhere, or provide the markup so we can test it on our localhosts, you'll have a better chance of getting some valuable input.
The problem with questions is that they lead others to believe the person asking the question has sufficient knowledge to ask the question. In programming that isn't always the case. There may have been something you missed, or accidentally jipped. Without others having eyes on your code, they have to assume you missed nothing, and overlooked nothing.
In IE I just use a class "normal_ol" for styling an ol list and made some modifications shown below:
previous code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0; width:500px;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; float:left; width:100%;}
modified code:
ol.normal_ol { float:left; padding:0 0 0 25px; margin:0;}
ol.normal_ol li{ font:normal 13px/20px Arial; color:#4D4E53; }
Turns out that YUI's reset CSS strips the list style from 'ul li' instead of just 'ul', which is why setting it just in 'ul' never worked.
Make sure you have no display property set in the li tag in my case I had a display: flex property on my li tag for some reason.
please use inline css
<li style="disply:list-item">my li content </li>
All you have to do is add this class to your css.
.ul-no-style { list-style: none; padding: 0; margin: 0; }
Including the padding and margin set at 0.
Some reset.css set the ::marker to content : "", try to unset that on the <li> element:
li::marker {
content : unset;
}