<!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.
Related
Lets say we have an <ol> and <li> nested inside a parent <li> of a parent <ol>.
It creates something like this :
<html>
<body>
<ol class="ol1">
<li>li 1 - ol 1<ol class = "ol1-1"><li>li 1 - ol 1.1</li></ol></li>
</body>
</html>
Is there any way to apply css styles in the list numbers (not the content) separately,i only know how to get both of them using pseudo css element:before but not separately,for example OL-1 to be color:blue and OL-1.1 to be color:red
Try defining a seperate class for each level of "ol" element then apply the css to the "class li::marker".
<html>
<style>
.ol1 li::marker{
color:blue;
}
.ol1-1 li::marker{
color:red;
}
</style>
<body>
<ol class="ol1">
<li>li 1 - ol 1
<ol class = "ol1-1">
<li>li 1 - ol 1.1</li>
</ol>
</li>
</ol>
</body>
</html>
you mean someting like:
.ol1 > .ol1-1 li{
color:red;
}
this makes every "li" after .ol1-1, that's a children of .oli1 color red. Or at least it should.
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>
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%;
}
So I am just learning CSS in my Web Programming 1 class, and the exercise is teaching us about class selectors, so our teacher wants us to make a page which has an unordered listed with only some of the listed items to be underlined. However, when I do this, my bullets in the lists get underlined aswell, where as in the page he wants us to make, they are not.
I've included my code below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.underline { text-decoration: underline}
</style>
</head>
<body>
<h1> Solids </h1>
<ul>
<li class= "underline"> Tetrahedron </li>
<li> Pentahedron </li>
<li class = "underline"> Cube </li>
<li> Heptahedron </li>
<li class= "underline"> Octahedron </li>
<li class = "underline"> Dodecahedron </li>
<li class = "underline"> Icosahedron </li>
</ul>
<p> What's special about the underlined items.
</body>
</html>
You should give .underline class text-decoration css property:
li.underline{
text-decoration:underline
}
JSFIDDLE
Your code is fine, it must be a browser glitch. Actually, to make a browser display underlined bullets is not that easy. It would have to be something like this:
/* this will display underlined bullets. It can also be done in the markup without the second rule and adding an • in between the tags */
li.underline {
text-decoration: underline;
list-style: none;
}
li.underline:before {
content: "\2022";
}
The best solution was suggested by #Huangism in the comments. The markup would look like this:
<li><span class= "underline"> Tetrahedron </span></li>
<!-- and so on... -->
Still, that's a strange glitch. No browser I tested with your markup displays the bullets incorrectly.
I agree with, Huangism's answer. Adding the span element inside the <li> and making that underlined will solve you problem. This way you can colour and style the bullets without effecting the list itself.
I'm fairly new to html and css.
I learned the basics and a few advanced techniques but, i have been having a problem with lists for a long time and would like to know how i could possibly fix my problem.
Here's the idea.
I'm making an online shop but i want to avoid positioning every single images,texts,links using a different id.
I had this idea, I would put my li inside a div so that way, everything inside my list would be stuck inside this box, make a class positioning my text,links,images properly, use display:inline and et voila, i can create an entire page of products using only a class.
The problem is display:inline isn't working.
I would really appreciate it if someone could help me out on this one.
This is a bad example but, you understand the principle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> Home </li> </div>
<div class="nav_button"> <li> Contact us </li> </div>
<div class="nav_button"> <li> Shipping </li> </div>
<div class="nav_button"> <li> About us </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>
display:inline is very limited and doesn't allow any block-level styling to added to it. You're better off using display:inline-block or using float:left. Keep in mind that if you use floats then you need to set the overflow of the parent element to overflow:auto (use visible for IE < 8) and this should work. Use inline-block first.
The reason it's not working is because you are using it insidea a div and that div element has only li element , the inline property would work if you have more than one li elements under a div.
Try this
<ul id="nav_bar">
<li class="nav_button"> Home </li>
<li class="nav_button"> Contact us </li>
<li class="nav_button"> Shipping </li>
<li class="nav_button" > About us </li>
</ul>
and for css
#nav_bar .nav_button {display:inline-block;}
or alternatively you can also use :
#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/
if you use the float method make sure you are using a element specified with clear:both; in the end.
note that : if the parent element width is too short to display horizantally then
ul {
width: 20px;
}
li
{
display: inline;
}
will not work.
also
under li element if you have display:block; statement such as
li
{
display: inline;
}
li a{
display: block;
}
not work.
use
display:flex;
It's worked for me
An inline element will not accept height and width. It will just ignore it. So the height and width that you have entered in css will be ignored that is why the empty div is not visible. moreover try using inline-block, it will solve the issue.