I've looked through several DBs but I haven't found the answer that matches or works for my scenarios, so I'm turning to the experts, or at least the more experienced. I'm fairly new to HTML and CSS. I'm trying to figure out how to target an li inside of a ul, that's inside of an li, under a ul. Sort of like a drop down menu, where the main header has a submenu with more options. I don't want to add more classes or id's. I've tried the following versions to apply some basic CSS to it, but I can't seem to get it to target it:
#header-nav ul li
li ul li a
li#header-nav ul li
Even descendants doesn't seem to work (or it may be that I'm not doing it correctly?)
HTML:
<ul id="header-nav">
<li>
Home
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
</ul>
I am attempting to target the Test 1 and Test 2 lines. Is there a way I can do this? I'm tapped on formats to make it work. I just want to change the font size of those two lines. I know it would be easier to add the classes or IDs but I am trying to avoid them where possible as I'm trying to understand the whole child, descendants, targeting thing better.
like that
#header-nav li > ul > li a {
background-color: red;
font-size: 80%;
}
<ul id="header-nav">
<li>
Home
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
<li>
Test Submenu
<ul>
<li> > Test 1 </li>
<li> > Test 2 </li>
</ul>
</li>
</ul>
Problem
"...I don't want to add more classes or id's.... I am attempting to target the Test 1 and Test 2 lines. Is there a way I can do this?"
Answer
Yes. But we must know some rules. CSS is declarative and its basic foundation are rules.
Casscading
The flow of CSS is a cascade of rulesets that take higher priority than the rulestes that have preceded them. From top, (less priority but wider influence due to inheritance,) to the bottom (higher priority but less influence due to how inheritance works in the same cascading direction (parent to child.))
The closer a ruleset is to the element it represents, the higher a ruleset chances of overriding the styles of the rulesets that have preceded it.
Styles
External Stylesheets: Normal priority, most maintainable, greatest scope -- unlimited amount of pages.
Page Location: Top of <head> tag.
Example: <link href="https://style.com/path/to/style.min.css" rel="stylesheet">
Inline Style Block: Higher priority, maintainable, limited scope -- a single page.
Page Location: Bottom of </head> tag.
Example: <style> selector { propertyName: propertyValue } ...</style>
Inline Style Attribute: Highest priority, least maintainable, least scope -- limited to a single tag.
Page Location: In a tag.
Example: <div style="propertyName: propertyValue"></div>
Specificity
The rules of Specificity are the only means of avoiding the cascading rule. This is the reason when we add a ruleset with !important after the Bootstrap CSS file and still have no success in overriding any style. Here's a CSS ruleset:
selector {propertyName: propertyValue}
⎱ ⎰
Declaration Block
Each CSS Selector has a measurable quality called Specificity. It is the measure of how specific a selector's declaration is as opposed to other selectors that share one or more properties and are used by a common element or group of elements. From that conflict, it is resolved by allowing the ruleset with the selector of the greatest specificity to override the styles of the other rulesets with its own styles. Should conflicting rulesets have selectors of equal specicity, then the rules of cascading apply (which ruleset is furthest from the top).
Specificity of a selector is measured by 4 separate numbers. From left (greatest) to right (least):
Being an inline style attribute. A single point in this category overrides all other categories that follow it. The only thing that can override it is !important unless of course it has an !important as well. If that's the case, then we can use the Grand Equalizer: JavaScript.
#ID. Having an #ID in a selector overrides everything except !important and inline style attributes.
.CLASS. Having .Class(es), [Attributes], and :Pseudo-class(es) in a selector overrides <Element Tags> and ::Pseudo-elements.
<Element Tags> and ::Pseudo-elements, very general thus the least in specificity.
Go to this page for an Online Specificity Calculator
If there's no dynamic elements added in the path then this'll work:
#header-nav li:last-of-type ul li a {
font-size: 48px;
}
There's 3 identical fragments of the layout -- each using a different relative unit of measurement (rem, em, %) at the equivalent distance of 48px (3 times the default of 16px = 1rem = 1em = 100%. Each fragment also shows how specificity and !important are used to make styles from frameworks like Bootstrap CSS so invincible.
Demo
html {
font: 400 16px/1.45 Consolas;
}
body {
font-size: 1rem;
}
b {
font-size: 1.5rem;
color: tomato;
}
i {
font-size: 1.25rem;
color: #A3CF65;
}
/* A */
/* 0,1,1,4 ⭐ */
#header-navA li:last-of-type ul li a {
font-size: 3rem !important;
}
/* 0,1,0,4 */
#header-navA li ul li a {
font-size: 2rem !important;
}
/* B */
/* 0,2,1,4 ⭐ */
#header-navB#header-navB li:last-of-type ul li a {
font-size: 3em;
}
/* 0,1,1,4 */
#header-navB li:last-of-type ul li a {
font-size: 2em;
}
/* C */
/* 🟊 */
#header-navC li:last-of-type ul li a {
font-size: 300% !important;
}
<!DOCTYPE html>
<html>
<head>
<meta chrset='utf-8'>
</head>
<body>
<ul id="header-navA">
<li>
<b>A</b>
</li>
<li>
<i>!important & Specificity Test</i>
<ul>
<li> <b>3rem</b> > Test A1 </li>
<li> <b>3rem</b> > Test A2 </li>
</ul>
</li>
</ul>
<hr>
<ul id="header-navB">
<li>
<b>B</b>
</li>
<li>
<i>Specificity Test</i>
<ul>
<li> <b>3em</b> > Test B1 </li>
<li> <b>3em</b> > Test B2 </li>
</ul>
</li>
</ul>
<hr>
<ul id="header-navC">
<li>
<b>C</b>
</li>
<li>
<i>!important & Inline Test</i>
<ul>
<li> <b>300%</b> > <a href="#" style='font-size:200%;'> Test C1 </a> </li>
<li> <b>200%</b> > <a href="#" style='font-size:200% !important'> Test C2 🟊</a> </li>
</ul>
</li>
</ul>
Related
just add color: inherit to link tag. As a result, link tag inherits black color. But can't understand from where? Can't find answer in devtools. Do somebody know? Thanks
a {
color: inherit;
}
<body>
<nav>
<ul class="nav-list">
<li>
Home
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</nav>
by default, css gives a black color to the text.
Since <a> is being used within the body, it inherits the features of the parent tag <body>
if you change the attributes of any element/s between <body> and <a> (for instance <li> <ul> etc.), then <a> will inherit the properties of the first direct parent.
inherit keyword inherits the property of the parent element.
By default the text, body, ul, li, nav has color property as black
color: black
so by giving
a{
color:inherit;
}
it inherits the property of its immediate parent. As in your code, its immediate parent is
<li>
so if the list has the color, tag will inherit its color. else it will inherit the property of the main parent i.e the
<body>
Have a look changing the color of body and li here. You will understand It better Test it live here
and This link shows that by default body has black color Follow the comments given in codepen you will understand it better here
I have multiple nav ul li a that i need to style different and I have no good way of doing this. I've looked around the net for quite a bit but i do not understand how to do this without using class="" in every element. My code is below. There must be a better way of doing this? Like all children that has class="loginmenu" should be like x and all children of class="dropdownmenu" should be like y. Even if they are the same element.
<nav class="loginmenu">
<ul class="loginmenu">
<li class="loginmenu">
<p>Login</p>
</li>
</ul>
</nav>
<nav class="dropdownmenu">
<ul>
<li class="gigs">
<p>Gigs</p>
<p class="subtext">Shows & Gigs</p>
</li>
<li class="music">
<p>Music</p>
<p class="subtext">Tracks & Sets</p>
</li>
<li class="booking">
<p>Booking</p>
<p class="subtext">Booking & Contact</p>
</li>
CSS:
nav.loginmenu {
position: absolute;
}
li.loginmenu{
font-size: 25px;
margin-left: 1200px;
} and so on...
You can use nav.loginmenu <element>.
nav.loginmenu li {
font-size: 25px;
margin-left: 1200px;
}
For more information see the documentation of CSS selectors or try CSS Selector tester.
CSS rules can represent a hierarchy. For instance, the following means: "Apply this rule to all li elements that are inside a nav element with class loginmenu")
nav.loginmenu li {
..
}
It's commonplace for me to add classes to one root element that has no rules of its own, but for which having that class affects behavior of its children.
When sharing functionality, it is also common to add one class to multiple elements, or multiple classes to one element (separated by spaces) if it simply represents certain behavior (eg, applying a margin to all list elements to give them a "tabbing" look)
Additionally, many properties (most of the font-... properties for instance) are inherited from parent to child unless they're overridden at a lower level, so there's no need to repeat those for further descendants.
Not exactly sure what you are trying to do here. But if I'm interpreting correctly, you want to target different elements within each <nav> element? If so you can add an id which should be unique (not repeated) to your <nav> element then target the element like so:
html:
<nav id="loginMenu">
...
</nav>
css:
#loginMenu li {
font-size: 25px;
margin-left: 1200px;
}
Or you can use Genhis answer.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>Interests
<ol>
<li style="color: orange">Basketball</li>
<li>Coding</li>
<li>Weight Lifting</li>
</ol>
</li>
<li>Jobs
<ul>
<li>Tutor</li>
<li>Salon Associate</li>
</ul>
</li>
</body>
</html>
How can I modify "Interests" (e.g. change its font color) without also modifying the ordered list it is a title of?
No classes or wrapping required here:
Demo: http://jsfiddle.net/abhitalks/jgbX7/
li { /* reset all list items */
color: black;
}
:not(li) > ul > li { /* all "li" under "ul" which are not under "li" */
color: red;
}
But, of course if you have multiple such lists, then providing a class to the top ul would help.
You can wrap Interests in a <span> tag and stylize it.
The part which changes :
<li><span style="color: red">Interests</span>
The full code :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li><span style="color: red">Interests</span>
<ol>
<li style="color: orange">Basketball</li>
<li>Coding</li>
<li>Weight Lifting</li>
</ol>
</li>
<li>Jobs
<ul>
<li>Tutor</li>
<li>Salon Associate</li>
</ul>
</li>
</body>
</html>
fast and easy way is to put a <span> around it then you can apply any style
If you select the li containing the text and the other list with CSS and apply styles like color, this will apply to child elements too if not excluded explicitly.
Just wrap the text in another element:
<li><span>Interests</span>
<ol>
It’s valid and light-weight, and you can apply styles directly.
Also, your ul should be closed, and the title element must not be empty.
you can use inline css
suppose
<li><span style="color:blue;">Interests</span>
</li>
You should be able to give it a class, i.e.
<li class="bob">
Then:
li.bob
{
color: #C1C1C1;
}
li
{
color: black;
}
and then refer to that in your style section
Actual color style, just for reference - but you get the idea.
For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:
<ul class="mylist">
<li>
moooo!
<hr width="40%">
</li>
<li>
maaaaa!
<hr width="40%">
</li>
...
</ul>
It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
I also do not want to use jQuery:
$('.mylist').find('li').append('<hr width="40%">');
So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?
jQuery Solution
Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.
I think it's better to use CSS for this. for example you can stop using <hr> tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul and li then you use li instead of <hr/> or simply <hr/> inside a <li></li> tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
If you think is wrong to add <hr> in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
Insert A Class That Creates A bottom-border: For Each <li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
Try this CSS:
li:after {
content: " ";
display: block;
height: 2px;
width: 100%;
}
How can I style one line of text in u nav bar with two different font sizes??
In my html I have:
<nav>
<ul>
<li><a heref="#">Home</a></li>
<li><a heref="#">About</a></li>
<li><a heref="#">Products</a></li>
<li><a heref="#">Stockists</a></li>
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
<li><a heref="#">Contact</a></li>
</ul>
</nav>
Where I have
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
I want Blog to be 35px and (a pinch of psalt) to be say 15px. I have used child selectors to target each of the nav elements to style for colour, font size etc but am unsure of how to target two separate elements on this one line in my css.
Just .nav ul li a and .nav ul li a em . If this is what you are looking for
Add a <span> to your HTML and give it a class which will allow you to target it with CSS. For example:
<li><a heref="#"><span class="big">Blog</span> <em>(a pinch of psalt)</em></a></li>
And CSS:
nav li .big {
font-size: 35px;
}
You already have an <em> tag around the remaining text (or you can target nav li a with a "default" text size), so that's the only HTML you will need to add. Just keep in mind that you should be consistent.
On another note.
Answer to my google search for other non situations.
The below CSS class definition
font.yellow {
color:yellow
}
works seamlessly when used like:
<p class"blue">
blue text here
<font class="yellow">yellow text</font>
still blue text here
</p>