My html looks like this:
<ul>
<li class="myItemClass">item foo</li>
<li class="myItemClass specialItemClass">item foo</li>
<li class="myItemClass">item foo</li>
<li class="myItemClass">item foo</li>
<li class="myItemClass specialItemClass">item foo</li>
<li class="myItemClass specialItemClass">item foo</li> <!-- problem here -->
<li class="myItemClass">item foo</li>
<li class="myItemClass">item foo</li>
</ul>
Now I want to define a css-style for an item that has the 'specialItemClass' and is located after an item that has the 'specialItemClass', too. How can I do that?
Further explanation: The 'specialItemClass' includes having a 2px coloured border. But if two special items are right beneath each other, the borders are doubled. So I don't want to add the special border at the top [or bottom] if there's another special item above [or below].
Use the adjacent sibling selector +
.specialItemClass + .specialItemClass{
/*styles here*/
}
use adjecent css3 selector to work around your issue.
its better to have mere specific selector.
Please see the fiddle
li.specialItemClass + li.specialItemClass{
border-top:none;
}
https://jsfiddle.net/0ou3a02u/
Related
I have a nested list in my menu and I wanted the first child of the sub list highlighted when the parent is highlighted. I want to code this just by using CSS (in SCSS file format) This is a list within a list. I have list items below another list item of another
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span> <!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list"> <!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
<li class="sub-list-item">
<span>this is another list item in class="sub-list"</span>
</li>
</ul>
*EDIT: changed some of the words being used in this question to make this one understandable. and added another child item to .sub-list to make a better understanding of the issue.
The 'span' (<a>) isn't actually a parent. It's a sibling. The parent to the first child (list item) in the sub list is the <ul class="sub-sub-list">. That means they are siblings.
You can use the + selector to target siblings: https://www.w3schools.com/cssref/css_selectors.asp
.sub-list-item a:hover + ul > li:first-child {
background-color: lightgrey;
}
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span>
<!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list">
<!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
</ul>
I made a menu , I have worked with chrome but now when I try with firefox I get spacing between items
In chrome
In Firefox
Here's The CSS
http://jsfiddle.net/Mazala/mpc1o2gf/
HTML :
<nav>
<ul class="menu">
<li id="accueil">Accueil</li>
<li id="bureau">Bureau</li>
<li id="actualites">Actualités</li>
<li id="partenaires">Partenaires</li>
<li id="contact">Contact</li>
<li id="liens">Liens utiles</li>
<li id="Liens">lien+subtitles
<ul class="sousmenu">
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
<li id="Liens">Liens utiles</li>
</ul>
</li>
</ul>
</nav>
CSS in the link .
Thanks for help.
Using inline block will make any text/spaces between your elements treated as text, and style them accordingly. One quick fix (if pure images) was to set the font-size to 0 (that wouldn't work for you since you have actual text in there).
The easiest solution, if you don't care about having the perfect looking code and just getting it to work, is to remove all extra spaces in your code. Which I did to your code, and it works:
<ul class="menu">
<li id="accueil">Accueil</li><li id="bureau">Bureau</li><li id="actualites">Actualités</li><li id="partenaires">Partenaires</li><li id="contact">Contact</li><li id="liens">Liens utiles</li><li id="Liens">lien+subtitles<ul class="sousmenu"><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li><li id="Liens">Liens utiles</li></ul></li>
</ul>
https://jsfiddle.net/mpc1o2gf/1/
That's a common issue with inline-block elements. By default, there some some spacing surrounding those elements. It's somewhat counter-intuitive but default behavior.
There are a few fixes to this. My preferred is to float the li elements. There are some caveats. Read this for a full understanding.
How do I select the last element in a sequence of adjacent elements?
Consider the following markup:
HTML
<ul>
<li class="foo">...</li>
<li class="foo">...</li>
<li class="foo">...</li> <!-- bingo -->
<li class="bar">...</li>
<li class="bar">...</li>
<li class="bar">...</li>
<li class="bar">...</li> <!-- bingo -->
<li class="foo">...</li> <!-- bingo -->
<li class="bar">...</li>
<li class="bar">...</li> <!-- bingo -->
</ul>
The number of consecutive foo or bar elements is dynamic. Also, assume the markup cannot be modified in any way.
Selecting adjacent elements is pretty straight forward:
CSS
.foo + .foo,
.bar + .bar { /* do something */ }
But selecting the last element in a series of consecutive elements, is that possible?
The CSS support for :has is still poor but it can solve the problem:
/* selects any .foo that has no .foo immediately after it */
.foo:has(+ :not(.foo)) {}
You must be dynamically setting up the list.... in that case give a name or an id to the last element and add the css effect you want....
What you asked is not possible according to me unless you have some way of recognizing the last element (may be the id or the name, again set this up if you are in control)
I don't believe there's a way to do this without changing the HTML or the way you generate it. However, if you generate it via the .append() method, all you'd have to do to use this (theoretically) is change it to .prepend(). If you do that, you can change the ul's css to have it select backwards, and then you can use the + selector like so:
(edit: I don't know how to reorder the snippet, but the JS is the least important and only there for if you want to see the .prepend() in action)
//some generation examples just for fun
foo.addEventListener('click',addKnown);
bar.addEventListener('click',addKnown);
r.addEventListener('click',addRandom);
function addKnown(e) {
let li = document.createElement('li');
li.className = e.target.id;
li.textContent = e.target.id;
document.querySelector('ul').prepend(li);
}
function addRandom(e) {
let li = document.createElement('li');
let type = ['foo','bar'][Math.round(Math.random())];
li.className = type;
li.textContent = type;
document.querySelector('ul').prepend(li);
}
ul {
display: flex;
flex-direction: column-reverse;
}
li:first-of-type,
.foo+.bar,
.bar+.foo {
color: red
}
<ul>
<li class="bar">bar</li> <!-- bingo -->
<li class="bar">bar</li>
<li class="foo">foo</li> <!-- bingo -->
<li class="bar">bar</li> <!-- bingo -->
<li class="bar">bar</li>
<li class="bar">bar</li>
<li class="bar">bar</li>
<li class="foo">foo</li> <!-- bingo -->
<li class="foo">foo</li>
<li class="foo">foo</li>
</ul>
<!-- some generation examples just for fun-->
<button id="foo">Add foo</button>
<button id="bar">Add bar</button>
<button id="r">Add random</button>
I would also recommend giving the ul some sort of class or id unless you only have one or want this to be the case for all of your uls on the page.
I'm sorry, I know this isn't exactly what you wanted (because it does technically change the markup by making it backwards), but I hope it's something that's at least possible or helpful in finding something that is.
There appears to be an nth-last-child selector:
http://css-tricks.com/almanac/selectors/n/nth-last-child/
You should be able to use it with a zero argument to get the last one
Edit: nth-last-child will indeed select the last child, which does not match the bingo's
Hopefully you can change the structure:
<ul>
<ul>
<li class="foo">foo 1</li>
<li class="foo">foo 2</li>
<li class="foo">foo 3 bingo</li>
</ul>
<ul>
<li class="bar">bar 1</li>
<li class="bar">bar 2</li>
<li class="bar">bar 3</li>
<li class="bar">bar 4 bingo</li>
</ul>
<ul>
<li class="foo">foo 1</li>
<li class="foo">foo 2 bingo</li>
</ul>
</ul>
and this css will work:
.foo:nth-last-child(1),
.bar:nth-last-child(1)
{
background-color: blue;
}
I am trying to style the output of wp_list_categories using CSS to put commas in between items. However, there is a whitespace appearing before the comma and I seriously cannot comprehend where it is coming from!
I have made a jsbin to demonstrate and compare.
Screenshot:
HTML:
<ul id="category-listing">
<li class="cat-item cat-item-6">Branding
</li>
<li class="cat-item cat-item-4">Environment
</li>
<li class="cat-item cat-item-5">Exhibition
</li>
<li class="cat-item cat-item-8">Lecture
</li>
<li class="cat-item cat-item-9">Photography
</li>
<li class="cat-item cat-item-10">Print
</li>
</ul>
CSS:
li {
font-size: 46px;
display: inline;
margin: 0;
padding: 0;
}
#category-listing li:after {
content: ', ';
}
The white space is appearing because it is there in your HTML code.
The closing </li> tag is on a new line. Carriage returns are counted as white space in HTML, and therefore you have white space at the end of the list item element.
The reason it is showing up is because you're using display:inline. When usign inline (or inline-block), white space is relevant because inline means "treat this element as plain text", and therefore any white space is considered an intentional part of the text.
The best way to get rid of this is to simply put the </li> closing tag on the same line as the rest of the text, so that there is no white space there.
There are a number of other ways around it, but most of them involve quite hacky CSS; simply closing up the space is by far the easiest option.
The next best alternative is to switch to using float:left instead of display:inline. This will also deal with the problem, but will change the way the whole thing is rendered, which will require you to make various other changes to your CSS to compensate.
FLoating the anchor inside the list item will solve this issue:
li a {float:left;}
It is because you have spaces with inline display. You have two choices:
Remove spaces:
<ul id="category-listing">
<li class="cat-item cat-item-6">Branding
</li><li class="cat-item cat-item-4">Environment
</li><li class="cat-item cat-item-5">Exhibition
</li><li class="cat-item cat-item-8">Lecture
</li><li class="cat-item cat-item-9">Photography
</li><li class="cat-item cat-item-10">Print</li>
</ul>
Use float:
ul {overflow: hidden;}
ul li {float: left;}
I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.
Would I run into any issues with something like this?
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
<li class="6"></li>
</ul>
You would do better to write it like this
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
Then you could add the background-image to either the a or the li.
However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.
It is not valid HTML because the only thing allowed in an <ul> element is <li>s.
It's not valid HTML.
<!ELEMENT UL - - (LI)+ -- unordered list -->