I have an html menu, that start like this:
<nav id='main'>
<ul>
and my CSS file goes like this:
nav #main ul {
list-style: none;
}
But for some reason, this does not seem to work...
What am I doing wrong?
Try using
nav#main ul {
list-style: none;
}
ie remove the space between nav and #main - using the space is indicating #main is a descendant of nav instead of saying #main is an id attribute of nav
See the docs here for pattern matching in CSS2
Space is descendant selector.
You are trying to apply this style to:
All the <ul> descendants from an object with id="main" that is descendant of a <nav> object.
You should instead apply the style to:
All the <ul> descendants from a <nav> object with id="main".
It can be done removing the first space:
nav#main ul {
list-style: none;
}
Remove the space
nav#main ul {
list-style: none;
}
it really should be
nav#main ul { }
Related
I'm still pretty new to CSS so this might be a silly question.
The list uses a hyphen rather than a bullet style. The bullet is sitting above the text line rather than next to the text. I've tried a range of methods that have been offered on here but it's not budging.
Here is the css I've got at the moment:
li {
list-style-position: inside;
position: relative;
padding-left: inherit;
}
ul, li:before {
content: '–';
vertical-align: middle;
position: relative;
display: list-item;
}
You can target the list style marker with ::marker pseudo class:
ul {
list-style-position: inside;
}
li {
background: dodgerblue;
}
li::marker {
content: '-';
color: hotpink;
}
<ul>
<li><br>
God's own country</li>
</ul>
I had a similar issue once, I solved it removing the p tags from the text inside the list on the HTML file, there was no need to change anything in the CSS.
You can put the text inside the li tags without the paragraph tags. This must have something to do with inline and block elements behaviour.
li {
list-style-position: inside;
}
<!-- notice that the first item has the <p> tag while the second has not -->
<ul>
<li><p>Some text with the paragraph tag.</p></li>
<li>Some text without the paragraph tag.</li>
</ul>
Firstly, happy new year to you all! :)
Ok let's get to it. I have 5 items in my menu, and i would like to color "+" part of the word to red, choosing 2nd,3rd and 4th item of menu.
This is what menu looks like right now.
This is how the menu should look like, when its done.
I might have given a bad picture, but i think you can see the red "+" on 2nd,3rd and 4th item of menu.
This is what i've tried so far, but i can't seem to figure out the nth-child method.
#menu li:nth-child(2):first-letter a{color:red;}
Also tried this, but it colors every first letter in all 5 elements :S
#menu .nav > li > a:first-letter{color:red;}
Any help will be appreciated!
Thank you all!
I've managed to find the solution. Not sure if it's the best one, but im posting it below, so that any1 in the future can use it too, if no other solution is found
#menu .nav > li:nth-child(2) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(3) > a:first-letter
{
color:red;
}
#menu .nav > li:nth-child(4) > a:first-letter
{
color:red;
}
Use the :not() selector to have all but one selected like this:
#menu{
background: rgb(83,83,83);
width: 100vw;
height: 40px;
}
ul{
text-align: center;
line-height: 40px;
vertical-align: central;
}
ul li{
display: inline-block;
color: white;
list-style: none;
margin-left: 25px;
}
a{
color: white;
display: block;
}
#menu ul li:not(:first-child):not(:last-child) a::first-letter{
color: red;
}
<div id="menu">
<ul>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
<li>+option</li>
</ul>
</div>
I know this question already has an accepted answer, but I think there is a semantically better way of doing this. Instead of having the + symbol inside the link's markup, why not add it as a pseudo :before element? Easier to style and not dependent on your markup.
<nav>
<ul>
<li>Domov</li>
<li class="with-symbol">Naravni kamen</li>
<li class="with-symbol">Dekorativni kamen</li>
<li class="with-symbol">Keramika</li>
<li>Kontakt</li>
</ul>
</nav>
And the respective CSS:
.with-symbol:before {
content: '+';
color: red;
}
Then position it with either position: absolute; or negative left margin.
From the docs (https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Afirst-letter): A first line has meaning only in a block-container box, therefore the ::first-letter pseudo-element has an effect only on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect. So you will need to add display: block to your anchor tags.
I would also change the selector to:
ul li a:first-letter {
color:red;
}
as you need to select the first letter of the anchor tag, not the list item.
As a side note, it might be a better solution to use a span as suggested above or pseudo elements to insert the plus character and use a class to determine if it should be displayed or no.
I'm learning how to build pure CSS drop-down menus, and I'm seeing a weird issue. I've searched and haven't found anything useful.
If you hover over the Blog link, you'll see "Case Studies" split in half with, "Case" on one line and "Studies" on the next line.
I' ve checked my HTML and it looks fine. It's been a long day so maybe I'm missing something obvious. :o
I have this so far:
<nav class="p-nav">
<ul>
<li>About</li>
<li>Showcase</li>
<li>Services</li>
<li>Blog
<ul>
<li>Case Studies</li>
<li>Tutorials
<ul>
<li>CSS</li>
<li>Javascript</li>
<li>Playground</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
#import url(http://fonts.googleapis.com/css?family=Lato:300, 400);
.p-nav li {
position: relative;
}
.p-nav ul ul {
display: none;
position: absolute;
top: 100%;
}
.p-nav ul li {
float: left;
}
.p-nav a {
display: block;
font: 300 100%/70px"Lato", sans-serif;
padding: 0 30px;
}
.p-nav ul li:hover > ul {
display: block;
}
Here is the link to the code: http://jsfiddle.net/6CwYh/20/
Can anyone explain why it's doing that, and how I can fix it?
TIA.
Cause of space "problems" it places those two words on two lines.
If you don't like that you can add white-space:nowrap;to the <li>so it want wrap, have a look at the fiddle: http://jsfiddle.net/6CwYh/21/
.p-nav li {
position: relative;
white-space:nowrap;
}
There is simply not enough space for the text to fit, which is why it is wrapping. Give the 2nd level ul a width, like 350px.
http://jsfiddle.net/6CwYh/24/
Also, make sure you use direct descendant operators (>) I've added some in the above link.
If I target #something ul li That actually will target all uls and all lis in #something even if they're nested.
This was causing the items in the dropdowns to float, which caused further problems.
/* Better selectors */
#something > ul {}
#something > ul > li {}
#something > ul > li > ul {}
#something > ul > li > ul > li {}
make it wider:
nav ul li{
width:200px;
}
and its fixed
I am working with a nested menu and have the same class appear on two levels of the tree, but I need to format said differently in the lower level. Any ideas how I can do this? I've searched for some time and tried many different solutions to no avail. Here's my HTML and most recent attempt:
<ul class="topnav">
<li><h3 class="toggle_action"> Meetings</h3>
<ul class="div_toggle">
<li><h3>Home</h3></li>
<li><h3 class="toggle_action"> Attend</h3> // <-- same div as line 2 but needs different formatting
<ul class="div_toggle"> etc...
and attempted CSS fix:
.toggle_action { /// the top-level format for the div with blue text
color:#5376c5;
}
ul.topnav ul li { /// the general <ul> formatting for the secondary level
color: #999;
}
.toggle_action ul ul li { /// my attempt to make the div appear in gray on second level
color:#999;
}
any tips would be greatly appreciated!
Your last CSS style never exists in the HTML; the <h3 class="toggle_action"> has no children.
I think you meant this:
.toggle_action {
color:#5376c5;
}
ul.topnav ul li {
color: #999;
}
ul ul li .toggle_action {
color: #999;
}
Html markup
<ul>
<li> parent
<ul><li> child </li></ul>
</li>
</ul>
What I wanna do is to apply background only to parent li's.
ul li a{
background:url(images/nav/divider.jpg) right bottom no-repeat;
}
This style applies to all li-s, not only parent.
How can I apply css rule only to parent li-s?
Guessing from your unusual HTML:
ul li.parent a {
background:url(images/nav/divider.jpg) right bottom no-repeat;
display:block;
width:50px;
height:15px;
}
Add your own value accordingly.
You simply need the first child selector:
#foo > li{
...
}
This states "select the LI element after the #id, only".
EDIT
I should point out, you need to target the parent UL item with an ID or class.
EDIT 2 I see your updated your HTML example. Removed my nested HTML.
You have two basic choices:
Use CSS to set the style for the li elements and then override those styles for child li elements, or
Specify an id for the parent, or a parent element and then more-specifically select
1
ul li {
background-image: url(path.to/image.png);
}
ul li li {
background-image: none;
}
JS Fiddle demo.
2
<ul id="uniqueID">
<li>first-level</li>
<li>
<ul>
<li>Second-level</li>
</ul>
</li>
</ul>
and with the CSS:
#uniqueID > li {
background-image: url(path.to/background-image.png);
}
JS Fiddle demo
It's worth noting, though, that many elements are, by default or with CSS-resets, styled to have transparent backgrounds. This means that you may have to over-ride the styles of the parent li elements, regardless:
#uniqueID > li {
background-image: url(path.to/background-image.png);
}
li li {
background-image: none;
}
JS Fiddle demo