I have a really basic list in HTML that looks like this:
<div id="navmenu">
<ul>
<li>photography</li>
<li>•</li>
<li>people</li>
<li>places</li>
<li>things</li>
<li id="lastElement">about</li>
</ul>
</div>
My CSS formatting looks like this:
div#navmenu li {
display: inline;
margin-right: 40px;
}
However, I want the last li element's margin-right be 0px. So I did:
li#lastElement {
margin-right: 0px;
}
When I check on Chrome's dev tools, this last CSS specification is crossed out. I don't understand why it's overridden by the "div#nav menu li" property? Isn't the last li element with its own id more specific?
Any help would be appreciated. Thanks in advance.
The one that is overriding it is more specific, it has two tag and an id selector, while your other only has a tag and id selector.
You could change it to div#navmenu li#lastElement or make the other selector less specific.
Hi now used to this
div#navmenu #lastElement {
margin-right: 0px;
}
or this
div#navmenu li:last-child {
margin-right: 0px;
}
Related
I'm making a hoverable ul that displays a p element in another div.
As there is no parent selector to be had in pure CSS, I'm stuck and cannot figure out how this is supposed to work.
Fiddle won't work for some reason(for me), so here is a bin:
https://jsbin.com/yohapudimo/edit?html,css,output
My best effort was:
#infoDrop > li:hover ~ #aboutPara > p{
display: inline;
}
while trying to target a sibling div
I think it might be possible without JS... this is untested though so bear with me -- it also has to be an adjacent element, which I'm not sure is a problem or not for you?
If this doesn't work for you, then I'm afraid you'll need JS.
#myPCont p {
display: none;
color: #fff;
}
.myCont:hover+#myPCont p {
display: block;
}
#myPCont {
background: #333;
height: 300px;
width: 300px;
}
<div class="myCont">
<ul class="hoverShowP">
<li>This is my first list item</li>
<li>This is my second..</li>
<li>And this is my third.</li>
</ul>
</div>
<div id="myPCont">
<p>Heyooo!</p>
</div>
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 am trying to create indentation for buttons that sit inside of a nested ul li structure.
I can't change the HTML as it is being rendered by a third party system.
The HTML
<ul>
<li><button>Parent</button>
<ul>
<li>
<button> Child</button>
<li><button>Parent</button>
<ul>
<li>
<button> Sibling etc</button>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
The ul and li have no margin or padding so the idea was to simply add padding to the button elements.
The issue is, because of the ul having no margin/padding, the buttons all start from the exact same point and there (no matter how deep they are nested) all have the exact same indentation.
LESS
ul{
li{
button{
padding-left: 25px;
}
ul{
li{
button{
padding-left: 35px;
}
}
}
}
}
I thought of doing something like the above (and account for as many levels as possible) but it would be a nightmare to maintain.
Surely there is a more elegant way to handle this, thoughts?
I don't know why you would want to go as far as to write a mixin for this.
My solution in LESS:
ul ul button {
padding-left: 25px;
}
ul ul ul button {
padding-left: 35px;
}
Would that solve the problem for you?
The resulting CSS would look like this:
ul ul button {
padding-left: 25px;
}
ul ul ul button {
padding-left: 35px;
}
Alright, so I thought of a different solution and looked at the LESS documentation but the underlying problem is that you can't know the number of levels of nesting coming into play beforehand obviously.
Thus you would have to wait for the HTML to be rendered, then read out the level of nesting (e.g. 5 levels) and based on that you could generate the CSS, which I'm afraid wouldn't make much sense and is something to be done in JavaScript.
All of that being said you could use a few variables to ease your writing process in LESS but that's about it. Here for an example:
#padding: 25px;
#addten: 10px;
#selector: ul button;
#selector { #padding; }
ul #selector { #padding + #addten; }
ul ul #selector { #padding + #addten*2; }
ul ul ul #selector { #padding + #addten*3; }
Probably you could also create a mixin for that to add another layer of abstraction but like I said, I wouldn't go thus far.
Hope this helps. =)
We have a left nav that I am trying to tweak just a tad. Please don't critique the validity of the HTML, we have a CMS and external developers that are driving the ship and, frankly it works for now.
What I want to do is apply a style to <DIV>s that are after the <DIV class="nav_selected">, I just want indent them with some padding-left:30px;
Thats it, but everything I have tried applies to the "nav_selected" div as well which is what I dont want. It is kind of a header, and the divs under that are children.
<div class="left_nav_2">
<div class="left_nav_2_container">
<ul class="no_bottom_border">
<div class="nav_selected"><li><h2>Link 1 Selected</h2></li></div>
<div><li>Link 2</li></div>
<div><li>Link 3</li></div>
</ul>
</div>
</div>
You can try creating a class for the first line, then use a negation pseudo class to utilize it.
:not(/*put all the classes in your css document here.*/){ /* put the css you want for it here.*/}
Something like this could work too:
CSS
.no_bottom_border li{
padding-left: 30px;
}
.no_bottom_border .nav_selected li{
padding-left: 0px;
// or just the opposite values of the .no_bottom_border li
}
Is it something like that?
ok you can use this:
ul.no_bottom_border > div:not(:first-child) {
padding-left: 30px;
}
hope it helps
Here it is which you want
Add padding-left to both the divs like
.no_bottom_border li{
padding-left: 30px;
}
.nav_selected li{
padding-left: 0px;
}
I'm designing a custom wordpress template for some friends, and want a horizontally justified top menu. All would be fine, except that wp_page_menu outputs the list elements all in one line, which (after a LOT! of head-scratching) appears to break the formatting and removes all space between the elements. For example, the following outputs 1, 2 and 3 spaced out and then 456 all together. (Tested in Safari, Firefox and Chrome, all on mac.)
<style>
.menu {
text-align: justify;
width: 700px;
margin: 10px;
}
.menu * {
display: inline;
}
.menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
</style>
<div class="menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
<span></span>
</div>
I've already got a custom function editing the output from wp_page_menu to add the span after the ul, so I guess the easiest thing to do would be to extend that function to put the line breaks in as well, but if anyone's got other ideas, or can tell me why this is happening (especially that!) that would be great.
EDIT:
Have fixed it now by adding a function that inserts a space to the html (code below if anyone's interested for now or if someone comes across this in the future). Seems that was all that was necessary! Would still be interested to hear if anyone can tell me why this is needed.
// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');
To answer your question, that's how xHTML works.
If you have the following:
testtest1
That would show up as
testtest1
And if you have the following:
test test1
That would show up as
test test1
Now, the same logic works for <li> elements, as well as various other selectors such as <img> selectors.
Have you have had a header with three images in a line, but when you tried to do this:
<img src="#" />
<img src="#" />
<img src="#" />
That will insert a space ( ) after each image, whereas having them in line would not.
Your function accomplishes exactly what you wanted. You could've done it using Javascript or CSS as well, but your solution is better. Just in case you are curious, here is how to do it with CSS:
.menu li:before {
content:' ';
}
Hope that helped.
instead of display:inline, try floating your lis left. then maybe:
no:
.menu * {
display: inline;
}
instead
.menu li{
float:left;
padding:0 5px;
list-style:none;
}
I guess i kind of embelished with the other stuff but give it a try!
If I understand it correctly - what you really need is a tabular layout.
Try adding this to the css:
.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }
You could just ditch the li tag altogether and just make them div's with the same class name.