I have an ul with 7 li inside of it. I know that I can style the first and last li but is it possible to style the last 3 li's so the text is a different colour? This is the first time I have come across this problem/dilemma. I have googled around a bit and have not found much that is really helping me.
<div class="international-portfolio">
<div class="international-portfolio-title"> Sales Representation International</div>
<ul class="nobullet inline int-portfolio ">
<li class="excelsior-hotel-ernst first">
<li class="le-mas-candille">
<li class="mandarin-oriental-hotel-group-worldwide">
<li class="victoria-jungfrau-grand-hotel-spa">
<li class="palace-luzern">
<li class="eden-au-lac">
<li class="bellevue-palace last">
</ul>
</div>
ive updated the coding - trying the solutions given but not working at the moment but will keep at it.
This should do the trick (but mind you, it won't work in older versions of IE):
http://reference.sitepoint.com/css/pseudoclass-nthlastchild
Use the css selector as follows:
li:nth-last-child(-n+3) {
/*stuff here*/
}
Here's an example, too:
http://jsfiddle.net/yAUwb/
You can use:
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
color: red;
}
It is kinda of possible with this code
.myList li:nth-last-child(1),
.myList li:nth-last-child(2),
.myList li:nth-last-child(3)
{
color: red;
}
Demo: http://jsfiddle.net/2np58/
Related
I need help with setting up a wordpress menu.
I made my html css but when I go under wordpress and when I use the wp_nav_menu () function I lose my specific id on <a> tags, Wordpress automatically generates new <li> <a>.
How can I select them from the class "menu_word" please?
<ul class="menu_word">
<li><a id="home" href="#">Tilte1</a></li>
<li>Tilte2</li>
<li>Tilte3</li>
<li>Tilte4</li>
<li><a id="sem" href="#">Tilte4</a></li>
<li>Tilte5</li>
</ul>
There you go
body .menu_word >li:nth-child(1)> a{ /*Title1 on pos 1 (specific for first level of menu)*/
border:1px solid red;
}
body .menu_word >li:nth-child(2)> a{ /*Title2 on pos 2 (specific for first level of menu)*/
border:1px solid blue;
}
<ul class="menu_word">
<li><a id="home" href="#">Tilte1</a></li>
<li>Tilte2</li>
<li>Tilte3</li>
<li>Tilte4</li>
<li><a id="sem" href="#">Tilte4</a></li>
<li>Tilte5</li>
</ul>
Can you add a class and target that?
If not, this will work, although its pretty brittle. It'll become more robust if you can add a class to the UL, but if you can add a class, you may as well add it to the <a> tag, or the <li> tag.
body > ul > li:nth-child(1) > a
Thank you for your answers, I also find a solution that I share if it can help.
<ul class="menu_word">
<li><a id="home" href="home">Tilte1</a></li>
<li>Tilte2</li>
<li>Tilte3</li>
<li>Tilte4</li>
<li><a id="sem" href="sem">Tilte4</a></li>
<li>Tilte5</li>
</ul>
a[href*="home"]{
font-weight: 800;
font-size: 1.2em;
}
a[href*="sem"]{
text-transform: capitalize;
}
I use a css counters in nested menus.
And since chrome 65 strange bug started to happen.
Basically when a child menu items appears dinamically,
the counters starts leaking to a parent's sibling elements.
<style>
ul {
counter-reset: test;
}
ul li::before {
counter-increment: test;
content: counters(test, ".") " ";
}
</style>
<button onclick="document.getElementById('submenu').style.display='none';">HIDE</button>
<button onclick="document.getElementById('submenu').style.display='block';">SHOW</button>
<ul>
<li>aaaa
<ul id="submenu" style="display:block;">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
https://jsfiddle.net/6ouvzhvd/14/
See a counter when opening page initialy, which is correct:
And this is how it looks when appeared dinamically (click hide -> show):
Anyone else experiencing this issue with latest chrome?
Thank you!
Yes, this is Chrome Bug. Documented here: https://bugs.chromium.org/p/chromium/issues/detail?id=822260
(which is how I found your post).
Is it possible to use wildcard to select data attribute by name with CSS only?
[data-widget-type="*.color"] {
color: orange
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
http://jsfiddle.net/
Yes, it's possible, just not quite the way you've done it. You need to move the delimiter (in your case, the "wildcard" asterisk) outside of your string declaration. There's also a better delimiter for what it looks like you're trying to select. Here's the right attr selector:
li[data-widget-type$="color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
This will select all the li elements with data-widget-type values that end in color, and change their color to orange.
Here's a JSFiddle demo to play around with it yourself.
[data-widget-type*="color"] {
color: red;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
More info about Attribute selectors - https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
li[data-widget-type$=".color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
You can use css selectors for that too.
For specific atribute you can use [] and if you are comparing something in css and want to search at the beginning ^= or if you want to find it at the end $= you can use this.
Also if you don't know where the word is in the comparing word then you can use wildcard * too. So in our case it is li[data-widget-type*=".col"]
As an advice, I like to struct my css files like this.
I always have a css class for colors.
li[class*="red"] {
color: red;
}
So I can also reach it from any other class like any-red, new-red when I don't want to use single red class.
Also don't forget that you can also use li[data-widget-type|="red"] for elements that starting with red. This is an old but good move from CSS2, some browsers may reject it so take care.
So here is the jsFiddle and here is the snippet.
li[data-widget-type$=".color"] {
color: orange;
}
<ul>
<li>asdasd</li>
<li data-widget-type="red.color">asdasd</li>
<li data-widget-type="none.color">asdasd</li>
</ul>
I try use after selector in my CSS code, but is not well centered.
I use Bootstrap. When I set after selector on li not a, content moves down.
This is my HTML code:
<nav class="navbar">
<div class="row">
<div class="col-md-2">
<img src="/images/logo3.png" class="img-responsive">
</div>
<div class="col-md-5">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Prices</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav navbar-nav navbar-right">
<li>Projects</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is CSS code:
.navbar-nav li a::after {
content: "|" black;
}
.navbar-nav li:last-child a::after {
content: " ";
}
Here's working fiddle for you - jsFiddle -
FYI : need to expand the result section enough for your menu items to align on a single row.
PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends on what kind of menu you need ). Using pseudo class to get those separators in your menu isn't a good practice. It could save the amount of HTML codes, but that's more like it when you use additional li between those menu items.
EXPLANATION
Your CSS was almost there, but you made a mistake.
content: "|" black;
You can't use CSS shorthand on the content attribute. And you need to give the ::after pseudo class padding-left to make it center-aligned.
Try above jsFiddle Hope this helps.
This is a comment, but I think it's the right answer so ^^
This seems very overcomplex. You should simply use display:inline on your ul's and then use padding for spacing between the list items. You can then float left and right the two individual lists respectively to get the positioning :).
Linking a background image with CSS is giving me so me issues. They seem pretty simple but I can't quite get around them:
I have list items for my main menu:
<div id="menuContainer">
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students">Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors">Visitors</li>
</ul>
my css sets the li to inline-block and gives defines the id's with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.
When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.
Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.
Any ideas?
You are using syntactically incorrect HTML. You can't wrap an <a> around a <li>. While fixing this may not necessarily make your problem go away, it will probably ensure that every browser behaves the same way.
You're not very clear about what you want to achieve, and what your menu looks like. If you want the whole area of the <li> to become clickable, you're probably best off giving the <a> a display: inline-block and fixed dimensions.
If you need more detailed answers, you may want to give us an online example.
First well form the html, then try your css again.
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students"> Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors"> Visitors</li>
</ul>
it's better to use line-height instead of text-indent. you need to use image replacement technique. like this
<ul id="menu">
<li><span>Home</span></li>
</ul>
and CSS
ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }