I am going through a CSS example, and it has code like this:
.sa-list li label > span,
.sa-list li h3 > span,
.sa-list li h4 > span,
.sa-list li a > div{
position:relative;
display:table-cell;
vertical-align:middle;
padding:10px 20px;
}
Can someone explain what's the relationship between say li, a and div and which style goes where?
These rules all style a span that is direct child of a label, h3 and h4 and a div that is a direct child of an a tag, all of which are a descendant of an li that is also a descendant of an elements with the class of sa-list.
For instance:
<ul class="sa-list">
<li>
<label>
<span><!-- this span is styled --></span>
</label>
</li>
</ul>
<div class="sa-list">
<ul>
<li>
<div>
<h4>
<span><!-- this span is also styled --></span>
</h4>
</div>
</li>
</ul>
</div>
<ul class="sa-list">
<li>
<a>
<div><!-- this div is styled --></div>
<div><!-- as is this div --></div>
<section>
<div><!-- this div is not, b/c it is not a direct child of the a --></div>
</section>
</a>
</li>
</ul>
Related
I just created a Materialize CSS navbar and I placed some icons to the text.
I tried to change the priority of the code but no luck.
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper grey darken-4">
<img src="logo.png" width="315" height="70">
<ul class="right hide-on-med-and-down">
<li><i class="small material-icons">home</i>Homepage</li>
<li><i class="small material-icons">store</i>Marketplace</li>
</ul>
</div>
</nav>
</div>
The main problem is that the text is floating off the nav bar:
https://i.gyazo.com/2130fead13cc9e03e8133b8a7466e9b2.png
The icon is pushing out the content i see.
nav > div.nav-wrapper > div > ul > li > a {
display: flex;
}
This is a dirty fix hope it helps, maybe theres better css for it but this works, you can also add some margin to the icon maybe.
nav > div.nav-wrapper > div > ul > li > a > i {
margin-right: 10px;
}
I have the Next.
<div data-role='navbar'>
<ul class='mainNAV'>
<li><a href='#home'>Principal</a></li>
<li><a href='#'>Yo 360</a></li>
<li><a href='#'>Mercado</a></li>
</ul>
</div>
So in CSS.. without adding a CLASS inside each LI or ANCHOR element.
How can i select all the Anchors inside the UL with the class 'mainNAV'?
So i can change font size, colors, etc, to all items..
Thanks!
You can use an attribute selector to only target anchors:
.mainNAV a[href^="#"] {
color:red;
}
<div data-role='navbar'>
<ul class='mainNAV'>
<li><a href='#home'>Principal</a></li>
<li><a href='#'>Yo 360</a></li>
<li><a href='#'>Mercado</a></li>
<li><a href=''>Not anchor</a></li>
</ul>
</div>
ul.mainNAV a
Would be the most basic selector. You could also use:
div > ul.mainNAV > li > a
div > ul.mainNAV li a
div > ul.mainNAV a
div ul.mainNAV li a
... and probably a couple dozen more ways
So nothing happens when I try to color list items in an unordered list using the general sibling combinator:
http://jsfiddle.net/bkbehpv0/
p {
color: blue
}
h1 ~ li {
color: red;
}
<h1> Title of site </h1>
<p> Text in the site </p>
<p> Second paragraphy </p>
<ul>My list
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
But a span inside of a paragraph colors with no problems at all:
http://jsfiddle.net/93khsvbn/
p {
color: blue
}
h1 ~ p span {
color: red;
}
<h1> Title of site </h1>
<p> Text in the site </p>
<p> Second paragraphy <span> heyo </span></p>
<ul>My list
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Sooo... is the span on equal footing with the paragraph when it comes to inheritance even though it's nested inside of the paragraph? Why?
I can't seem to find a thorough source from which I could learn about inheritance.
Also, just as an aside... how do I style the title of an unordered list without styling the list items? Do I HAVE to assign an identifier to the ul?
If I style the ul the list items will inherit that styling as well.
In your first example (h1 ~ li) you are saying:Find any li which are siblings to and preceded by a h1. As the li belong to a ul this rule is not matched.
The second example (h1 ~ p span) you are saying:Find any spans which are children to p which is a sibling to and preceded by a h1. So the rule is matched.
To get the first rule to match you should instead use h1 ~ ul li. This effectively says:Find any lis which are children to ul which is a sibling to and preceded by a h1.
p {
color: blue
}
h1 ~ ul li {
color: red;
}
<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
It should also be noted that the text "My List" is not valid in the ul, it should be surrounded by li tags. To differentiate it from the other li you could either:
Add a class: <li class="heading">My List</li>
Move it outside the list: <h2>My List</h2><ul>
Use the first-child selector: li:first-child {color:green;}
p {
color: blue
}
li:first-child {
color:green;
}
h1 ~ ul li {
color: red;
}
<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
<li>My List</li>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
First of all, as Joshua K said, the <h1> is sibling (meaning in the same dom level) as <ul>. So as said, you can access a sibling's children like this
h1 ~ ul > li
I don't know if there is a complete inheritance guide but you can read about CSS selectors here and consequently learn about the dom inheritance and element relations.
As for your final question, there is no header in a <ul>. In your example "My list" is just plain text. You can style it with two ways.
1) (the bad way) style the whole <ul> and the overide the attributes in the <li> elements.
2) wrap your title around an element e.g. <span>My List</span> and apply style in ul>span
My HTML code is as follows:
<div class="c1"> Heading
<div>
<ul style="display:none">
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
This is my CSS :
.c1:hover > div ul
{
display:block;
}
How do I access lower level children with ">" operator? I basically want the list to be displayed on hover of c1.
You need to remove the inline style (style="display:none") from your markup - inline style will override the styles loaded from the stylesheet.
Instead, put this in your stylesheet:
.c1 > div ul {
display:none;
}
.c1:hover > div ul {
display:block;
}
Do this -
Demo
<div class="c1"> Heading
<div>
<ul>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
CSS
ul{ display: none; }
.c1:hover div ul
{
display:block;
}
trying to select an adjacent's child element with CSS... not really sure how to
This is the HTML structure
<ul>
<li>
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
I want to say that there is a menu with multiple levels. When theres a UL existing within a LI then the needs to have a dropdown/expand icon... so I thought if I use the adjacent selector I can determine if this level has kids to expand and this is what I thought would work but didn't:
ul li a ~ ul .icon {
// doesnt work
}
ul li a .icon ~ ul {
// doesnt work
}
This works but I need to target the .icon
ul li a ~ ul {
// works
}
Cheers, Dom
Building upon my comment on your question. If you have control over how the HTML for the menu is generated, a workaround would be to add an extra class to each li-element that has a sub-menu. Like this:
<ul>
<li class="has-submenu">
<a href="#">
<span class="icon"></span>
First level
</a>
<ul>
<li>
Second level
</li>
</ul>
</li>
</ul>
Then you could use a selector like this:
.has-submenu .icon {
/* Do your stuff here */
}
ul is a child of li, not the anchor. So ul li ul .
If you want to select it as a sibling, then ul li a + ul