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>
Related
I would like to select the text part of a li and not the ::marker part.
So when I hover the li::marker the translation does not work but when I hover the text part, the translation works.
So I would like something like this but it doesn't work :
li:hover:not(li::marker) {
transform: translate(20px);
}
Not possible to reference in CSS. You could set ul to list-style-type: none; and create a custom ::marker with a pseudo-element and reference it that way.
However, with what it appears you're trying to do I think the following will work with a span.
span {
display: inline-block;
}
li:hover span {
transform: translate(20px);
}
<ul>
<li><span>List item</span></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 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 { }
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;
}
Is there a way to increase the size of just the bullet list-style-type using CSS? I don't want to increase the size of the bullet text, just the bullet type. I can't use images or JavaScript either. It has to be something I can embed inside <style> tags within the <head> tag.
Might not work in old version of IE.
li:before{ content:'\00b7'; font-size:100px; }
Demo
For IE6:
Without javascript or images, I would recommend putting a <span>·</span> in the beginning of every list item and styling that.
I have had to do something similar. My method was to add a span tag around the text within the li:
<li><span>Item 1</span></li>
<li><span>Item 1</span></li>
Then you can increase the font-size of you li and reduce the font size of your span:
li {
font-size: 20px;
}
li span {
font-size: 14px;
}
You may need to adjust line-heights and margins to accommodate for the extra li sizing. But this method will also allow you to colour the bullets separate from text.
To increase the size of the bullet you can use
li::marker
{
font-size: 2rem;
font-weight: bolder;
}
and to change bullet character, the content property will work
li::marker
{
content: '\2746';
font-size: 2rem;
font-weight: bolder;
}
When you say you can't use images, do you mean you can't edit the li tags to add images, or that you can't use an image at all?
On the li elements, you can set the list-style-image property.
li {
list-style-image: url('/imagepath.png');
}
This can still go in your head tag without editing the markup of the list.
no way that I'm aware of.
but you could fake it by using :before
ul,li{list-style:none;}
li:before{content:"o";font-weight:bold;}
put any background color for the (ex: .menu li a )tag and add padding for that you will get like a box then border-radius and then for ( .menu li ) apply padding for left and right for spacing... (explained in reverse order)
#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;}
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}
Was looking for a solution to this too and found that if you nest a p inside li, you can style the bullets and bullet text separately.
<div>
<ul>
<li><p>Hello</p></li>
</ul>
</div
div ul li {
/*this will style the bullets*/
}
div ul li p {
/*this will style the text*/
}