I have a list of items which I am trying to add dividers to right of each using the :before psuedo element.
Unfortunately, it seems like when I use it in combination with both last-child and first-child, it targets every element in the list.
Example - http://codepen.io/anon/pen/rupqi
Markup
<ul class="nav nav--inline nav--secondary">
<li><a class="nav--secondary__item" href="#">Site Map</a> </li>
<li><a class="nav--secondary__item" href="#" title="Search Terms">Search Terms</a> </li>
<li><a class="nav--secondary__item" href="#" title="Advanced Search">Advanced Search</a> </li>
<li><a class="nav--secondary__item" href="#" title="Contact Us">Contact Us</a> </li>
</ul>
CSS
.nav--inline, .nav--inline > li, .nav--inline > li > a { float: left; }
.nav--secondary__item {
color: #706782;
font-size: 1.2em;
padding: 0.8em;
position: relative;
#include transition (background-color 0.5s ease-in-out);
}
.nav--secondary__item:before {
content: "|";
color: #939EB7;
position: absolute;
left: 0;
}
.nav--secondary__item:first-child:before, .nav--secondary__item:last-child:before { content: "*"; }
Does anyone know why this happens, and if so, how to fix it?
Change your css to :
li:first-child .nav--secondary__item:before,
li:last-child .nav--secondary__item:before {
content:"*";
}
Because .nav--secondary__item is first-child as well as last-child of its parent li, following selector applies the content to all of them.
.nav--secondary__item:first-child:before,
.nav--secondary__item:last-child:before
{ content: "*"; }
Fiddle
:first-child pseudoclass selects the first child of its parent, similarly :last-child.
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
See doc
This is happening because you have a elements inside li elements and you are applying first-child to those a elements.
So .nav--secondary__item:first-child applies to every .nav--secondary__item, because the parents for each a are the surrounding li, not your ul.
Going by your class naming scheme, you can change your HTML to look like this:
<li class="nav--secondary__item">
<a class="nav--secondary__item__link" href="#" title="Site Map">Site Map</a>
</li>
And your CSS for the first-child/last-child will need a slight tweak:
.nav--secondary__item:first-child .nav--secondary__item__link:before,
.nav--secondary__item:last-child .nav--secondary__item__link:before {
content: "*";
}
You will also have to make the styles that apply to the a element use the .nav--secondary__item__link class instead.
Example forked from yours: http://codepen.io/anon/pen/rknmL
Related
I have the following, simplified:
<ul class="menu">
<li class="button-1">
Link
</li>
</ul>
The 'a' is dynamically loaded and I cannot add a class to it. I can only add a class to the 'li'. I want to add an icon before the 'a', so that it is included as part of the clickable link.
Currently I have:
.button-1:before {
font-family: "FontAwesome";
content: "\f007";
padding-left: 14px;
}
which sets the icon perfectly above the text link. But it's not clickable. Thus, I tried...
.button-1 a:before
But this doesn't work. Nor any other variation that I can think of or find. I think I am being incredibly stupid here and missing something obvious. Any advice. Thanks
It works (i.e. clickable etc.) when you use the :before on the child, i.e. .button-1 > a:before:
.button-1 > a:before {
content: "© ";
}
<ul class="menu">
<li class="button-1">
Link
</li>
</ul>
(As you can see, I used some other content to work around the non-available FontAwesome Icon)
ADDITION AFER COMMENTS:
You can also use :afer insteadof before. In this case you need some more settings, also for the parent, especially a relative/absolute position pairing as shown below:
.button-1 {
position: relative;
padding-left: 20px;
}
.button-1>a:after {
content: "©";
position: absolute;
left: 0px;
}
<ul class="menu">
<li class="button-1">
Link
</li>
</ul>
I have a menu consisting of nested ULs and LIs, eg:
.wrapper > ul:first-child > li:last-child {
color: red;
}
<div class="wrapper">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li>Style me!
<ul>
<li>Lorem</li>
<li>Don't style me!</li>
</ul>
</li>
</ul>
</div>
I want to add a style to the last <li> of the first <ul>, but not have it's children (the nested <ul>) inherit it.
I have tried:
.wrapper > ul:first-child > li:last-child {/*styles*/}
but this still styles the last element.
Would anyone know how I can target just that 1 element (with just CSS)?
Some CSS properties are inherited and you can't prevent that.
Inheritance propagates property values from parent elements to their children.
Some properties are inherited properties, as defined in their
property definition table. This means that, unless the cascade results
in a value, the value will be determined by inheritance.
However, you can override that by selecting the children and restoring the desired value.
.wrapper > ul:first-child > li:last-child {
color: red;
}
.wrapper > ul:first-child > li:last-child > * {
color: initial;
}
<div class="wrapper">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolar</li>
<li>Style me!
<ul>
<li>Lorem</li>
<li>Don't style me!</li>
</ul>
</li>
</ul>
</div>
I am currently trying to add arrow indicators on my navigation menu for items which have submenu options.
Currently I am using this CSS:
.mainNav li > a:after {
color: #444;
content: ' ▾';
}
But this adds a dropdown arrow to every <li> regardless of if there is a submenu or not. Is there a way with just CSS to only add this arrow to items that have sub-items?
Thanks!
No. CSS has no contains child selector. You'd probably be better to just add a class to the li element. For example:
<li class="has-child">
The Link
<ul class="child">
<li>Child 1</li>
</ul>
</li>
Your CSS selector would in turn look like:
.mainNav li.has-child > a:after {
color: #444;
content: ' ▾';
}
You could have jQuery add the class for you, if that's an option:
$('.mainNav li:has(ul)').addClass('has-child');
jsFiddle Demo
CSS has no contains child selector.
However it has various sibling selectors, only-child and not(:only-child)
Since you add indicator to the anchor, use following CSS
.mainNav li>a:not(:only-child):after {
color: #444;
content: ' ▾';
}
<div class="mainNav">
<li>
The item with child
<ul class="child">
<li>Child 1</li>
</ul>
</li>
<li>
No child item
</li>
</div>
Yes you can without any jQuery : https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/
My HTML structure is as per the following:
<nav class="main-nav">
<ul>
<li class="gallery-collection">
Welcome <!-- Hide this -->
</li>
<li class="page-collection">
About
</li>
<li class="gallery-collection">
Support
</li>
...
How do I hide the first element saying "Welcome" using CSS? Note that 2 elements have the same class here: 'gallery-collection'.
Max compatibility:
.main-nav li {
display: none;
}
.main-nav li + li {
display: list-item;
}
Less compatibility, but not too bad:
.main-nav ul li:first-child {
display: none;
}
With CSS only (as your question was only tagged css):
.main-nav li:first-of-type
{
display:none;
}
The :first-of-type selector is supported in all major browsers, except IE8 and earlier.
i have nested lists with links inside the li tags. On nesting level x I want to change the appearance of the links. Just some sample code:
CSS:
.blue a { color: blue; }
.red a { color: red; }
HTML:
<ul>
<li class="blue">blue-1</li>
<li class="red">red-1</li>
<li class="blue">blue-2
<ul>
<li>
blue-3
<ul>
<li class="red">
red-2
<ul>
<li>red-3</li>
<li>red-4</li>
</ul>
</li>
<li>blue-4</li>
</ul>
</li>
<li class="">blue-5</li>
</ul>
</li>
<li class="red">red-5
<ul>
<li>red-6</li>
<li>red-7</li>
</ul>
</li>
</ul>
In that way it is working as expected. Links with text red-* are in red. But when I change the order of the CSS classes, it is not longer working:
.red a { color: red; }
.blue a { color: blue; }
Why this behavior? Shouldn't it be the same?
I have to use more colors than red and blue, so it is impossible to give a correct order in CSS.
Css selector precedence is set according to how specific it is:
every tag is counted as 1 point
every class as 10 points
event id as 100 points
Both selectors you got have the same precedence, so that one which is set further in code overrides previous ones.
The reason for this is that in your css you're telling every a tags that are child, grandchild, etc. elements of a class named blue. And that's getting overidden when you're telling that every a tags that are child, grandchild, etc. elements of a class named red should be red.
So instead of doing this (affecting all link tags)
.blue a { color: blue; }
.red a { color: red; }
You could do this (affects only the first child if it's a link tag):
.red > a,
.red > ul > li > a{ color: red; }
.blue > a,
.blue > ul > li > a { color: blue; }
What that second line does is it finds all elements that has a class name red. Then it finds all direct child ul elements. And under those matching elements it finds all direct child li elements that has direct child a elements. Matching these, it finally adds styles.
JSFiddle:
http://jsfiddle.net/Y9jFr/