Styling span class under list item - html

How do we style span class under list item in css?
I have tried as in below but its not working
wrap.error {
color: #FF0000;
display: block;
}
<ol>
<li>
<span class='error'>Some error</span>
</li>
</ol>

style like this
li span.error {
color:#FF0000;
display:block;
}
check with snippet
li span.error {
color:#FF0000;
display:block;
}
<ol>
<li>
<span class='error'>something here</span>
<h3>What is the smallest prime number?</h3>
<input type="radio" name="question0" value="A"<?php echo ($question0=='A')? 'checked':''; ?> />2<br>
<input type="radio" name="question0" value="B"<?php echo ($question0=='B')? 'checked':''; ?> />1<br>
<input type="radio" name="question0" value="C"<?php echo ($question0=='C')? 'checked':''; ?> />3<br>
<input type="radio" name="question0" value="D"<?php echo ($question0=='D')? 'checked':''; ?> />4<br>
</li>
</ol>

you use wrap in selector,but i don't see it in html code.
change css styel like this:
li .error {
color:#FF0000;
display:block;
}
li .error {
color:#FF0000;
display:block;
}
<ol>
<li>
<span class='error'>Some error</span>
</li>
</ol>

This is to apply to all spans,
ol li span {
color: #FF0000;
display: block;
}
<ol>
<li>
<span class='error'>Some error</span>
</li>
</ol>
This is to apply to the class only,
ol li .error {
color: #FF0000;
display: block;
}
<ol>
<li>
<span class='error'>Some error</span>
</li>
</ol>
Follow the order of the children from parent.

Related

Unable to fit content to div in a CSS and HTML treeview

I put together a treeview control with HTML and CSS, that can display the nodes as an Org chart or a classic treeview list.
In the CodePen, each node has a set width: 100px.
How can I fit the content of the div (using display: inline-block for example), but keep the layout of the chart as it is?
The layout of the tree as you see it is exactly as I want it, apart from the set width. When I tried to replace width: 100px with display: inline-block, the layout changes completely and whatever I tried only made it worse.
As for the layout:
org-view: If a node is directly within a red rectangle box, is children should
be displayed horizontally (eg: A, F, M and N are horizontally
displayed under Root Node). The parent node is centered in the middle of its first and last child (Root Node is centered in the middle of A and N)
list-view: If a node is directly within a green rectangle box, its children will appear below, vertically.
HTML:
<head>
<meta charset="UTF-8" />
<title>Hierarchy Chart</title>
</head>
<link rel="stylesheet" href="hierarchy-chart.css">
<body>
<div class="wbs">
<ol class="org-view">
<li>
<div class="node" for="node-1">1. Root node</div>
<input type="checkbox" checked id="node-1" />
<ol class="list-view">
<li>
<div class="node" for="node-1-1">AAAA</div>
<input type="checkbox" checked id="node-1-1" />
<ol class="list-view">
<li>
<div class="node">BBBB</div>
</li>
</ol>
<ol class="org-view">
<li>
<div class="node" for="node-1-1-2">CCCC</div>
<input type="checkbox" checked id="node-1-1-2" />
<ol class="list-view">
<li>
<div class="node">DDDD</div>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">EEEE</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<ol class="org-view">
<li>
<div class="node" for="node-1-2">FFFF</div>
<input type="checkbox" checked id="node-1-2" />
<ol class="list-view">
<li>
<div class="node" for="node-1-2-1">GGGG</div>
<input type="checkbox" checked id="node-1-2-1" />
<ol>
<li>
<div class="node">HHHH</div>
</li>
<li>
<div class="node">IIII</div>
</li>
</ol>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node" for="node-1-2-2">JJJJ</div>
<input type="checkbox" checked id="node-1-2-2" />
<ol>
<li>
<div class="node">KKKK</div>
</li>
<li>
<div class="node">LLLL</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">MMMM</div>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">NNNN</div>
</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
CSS
body {background-color: white;}
.wbs {
display: grid;
border: 4px solid #eee;
position: relative;
}
.wbs ol {
list-style-type: none;
padding-left: 10px;
}
.org-view {
border: 1px dashed red;
margin: auto;
}
.org-view >li > .node:first-child {
margin-left: auto;
margin-right: auto;
}
.list-view {
border: 1px dashed lightgreen;
vertical-align: top;
}
/* Tree view collapsible functionalities */
.wbs input {
//display: none;
}
.wbs input ~ ol {
display: none;
}
.org-view >li > .node:first-child {
margin-left: auto;
margin-right: auto;
}
.org-view > li > input:checked ~ ol {
display: inline-block;
}
.org-view .list-view input:checked ~ ol {
display: block;
}
.org-view .org-view input:checked ~ ol {
display: inline-block;
}
.node {
margin-top: 10px;
}
.node {
color: blue;
position: relative;
background-color: white;
border-radius: 3px;
border: 2px solid #4285F4;
//display: inline-block;
width: 100px;
padding: 4px;
vertical-align: top;
}
To me it seems fine.
If you want the nodes to cause a line break, you could wrap them within a <div> element, so they would have a block element breaking the lines.
Also, you might wanna center them.
Here's a fork of your CodePen: https://codepen.io/anon/pen/jYdEro?editors=1100#
Had only the first nodes. I'm too lazy to actually do the entire thing - but you'll get the point :)
Some explanation:
Added a new wrapper element for each node element named node-wrapper. The default display for <div> elements is block so that takes care of the line breaks. The styles for that element:
.node-wrapper {
text-align: center;
}
Since the node element is inline-block, we can center it by using text-align on the parent element.

Bootstrap <li> isn't responding to css?

I have this section of html:
<ul id="checkout">
<li>
<p>$1.99 Basket</p>
</li>
<li>
<form>
QTY: <input type="number" name="quantity" min="0">
</form>
</li>
</ul>
And it displays like so:
For some reason the "$1.99 Basket" is not inline with the quantity form.
My CSS for the section is like so:
#checkout {
display: inline;
}
I simply want the Price and Quantity field on the same level.
Try the below code to pull elements left or right.
#checkout li:nth-child(1) {
display:inline-block;
float:left;
}
#checkout li:nth-child(2) {
display:inline-block;
float:right;
}
After this code don't forget the clear with below code.
#checkout {
clear: both;
}
jsfiddle
Get rid of your <p> tags and add your lis to your css
<style>
#checkout li {
display: inline;
}
#checkout form {
display: inline;
}
</style>
<ul id="checkout">
<li>
$1.99 Basket
</li>
<li>
<form>
QTY: <input type="number" name="quantity" min="0">
</form>
</li>
</ul>
Assuming you want them horizontally aligned:
You are setting the <ul> to display: inline;, but you need to set your <li> elements to display: inline-block; so that they will appear on the same line. Just targeting the <ul> will not affect the children.
(The <li> element's default display property value is list-item.)
#checkout li {
display: inline-block;
}

Is there a universal css3 selector like ">*" to style every child element inside that parent?

What I'm trying to accomplish:
Removing the bottom border on the nested list-item element, but keeping the bottom border of its parent list-item element.
I'm trying to figure out if I can use a "universal selector", like ">*" to say: "For everything element that lives in this parent, make the border 0".
Question:
Is this possible?
See the fiddle: http://jsfiddle.net/VnLZH/
HTML:
<aside>
<b>What I'm trying to accomplish: </b><br>
1.) Removing the bottom border on the nested list-item element, but keeping the bottom border of its parent list-item element. <br>
2.) I'm trying to figure out if I can use a "universal selector", like ">*" to say: "For everything element that lives in this parent, make the border 0". <br><br>
<b>Question</b><br>
Is this possible?
</aside>
<h1>This works</h1>
<div class="option1">
<ul>
<li>Category</li>
<li>Category</li>
<li>Category</li>
<li>Category
<div>
<ul>
<li><input type="radio" name="radio" /> Option 1</li>
<li><input type="radio" name="radio" /> Option 2</li>
<li><input type="radio" name="radio" /> Option 3</li>
</ul>
</div>
</li>
<li>Category</li>
<li>Category</li>
</ul>
</div>
<h1>What I want to work</h1>
<div class="option2">
<ul>
<li>Category</li>
<li>Category</li>
<li>Category</li>
<li>Category
<div>
<ul>
<li><input type="radio" name="radio" /> Option 1</li>
<li><input type="radio" name="radio" /> Option 2</li>
<li><input type="radio" name="radio" /> Option 3</li>
</ul>
</div>
</li>
<li>Category</li>
<li>Category</li>
</ul>
</div>
CSS:
aside { background: #f2f2f2; margin: 1em 0; padding: .5em; }
h1 { margin: 1em 0 0; }
/* This works */
.option1 { }
.option1 ul { }
.option1 ul li { border-bottom: 1px solid black; }
.option1 ul li div ul li { border: none; }
/* What I want to work */
.option2 { }
.option2 ul { }
.option2 ul li { border-bottom: 1px solid black; }
.option2 ul li div >* { border: none; }
Your code (.option2 ul li div > *) doesn't work because the lists themselves have no borders, but the list items do. Thus, .option2 ul li div ul > * would work, but moreover, even specifying .option2 ul li * would target any element nested within a list item of the option2 list.
.option2 ul li { border-bottom: 1px solid black; }
.option2 ul li * { border: none; } //removes border on nested elements of any kind
I misunderstood
Just remove the ">" and you should be fine
http://jsfiddle.net/VnLZH/9/
.option2 ul li div * { border: none; }

CSS Direct Decedent Li

In css how would I change on hover the color of test 1 but not color of list 1, 2,3?
<ul>
<li>
test 1
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
One way is to specify the "default" color:
li:hover {
color:#f00;
}
li, li:hover li {
color:#000;
}​
http://jsfiddle.net/D8dwt/1/
Another (cheat?) is to use more markup to wrap the content you want styled on hover:
li:hover span {
color:#f00;
}​
<ul>
<li>
<span>test 1</span>
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>​
This is one way to go:
ul > li {
color: red;
}
ul > li:hover {
color: blue;
}
ul > li:hover > ul > li {
color: red;
}
Add test1 into a div element so that it is in a separate leaf.
css:
div:hover {
color: blue;
}
Although there may be a way to do this without modifiying the html..
Give it it's own class and define it in your CSS file.
<li class="yourclass">
Or put it in tags and define the link in your CSS
li.yourclass a:hover {
text-decoration: underline ;
}

Make a list of values line up with a textarea and labels

Here's some CSS and HTML to make a textarea below a list of data points:
form label {
width: 140px;
float: left;
}
form ol li {
background: #98c8dc;
list-style: none;
padding: 5px 10px;
}
<form>
<ol>
<li>
<label><br/><br/><br/><br/>Recent data</label>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
</li>
<li>
<label>New data</label>
<textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
It renders like this:
How would you recommend I get it to line up just right?
Namely, "Recent data" should line up with the "28 96" line and, perhaps trickiest, the "30 95", despite being in the textarea, should line up as if it's just another row that comes after the "28 96".
Vertical-align doesn't work in inline elements but does work in tables (more details on vertical-align).
So here's a solution: I just wrapped the two main elements in the first li in a table row, and set the vertical align to bottom to force the 'recent data' label to the bottom. (There might be some way using the display property to change the li from an inline element?)
You'll also need to tweak the padding on the ol and the labels and table tags so that everything lines up. In real life you probably use some sort of reset css to normalize the default style rules for all these different elements, so you might have to make different tweaks to get everything to line up perfect, but here's what I came up with.
Altogether now:
<style>
table,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent}
body{line-height:1}
ol,ul{list-style:none}
table {border-spacing: 0px;}
table td{
vertical-align: bottom;
}
* {
font-size: 14px;
font-family: Times New Roman, serif;
}
form label {
width: 140px;
float: left;
}
form ol li {
background: #98c8dc;
list-style: none;
padding: 5px;
margin-bottom: 2px;
}
form ol li:last-child {
margin-bottom: 0px;
}
form li label{
padding: 4px 0 4px 0;
}
</style>
<form>
<ol>
<li>
<table><tr><td>
<label>Recent data</label>
</td><td>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
</td>
</tr></table>
</li>
<li>
<label>New data</label>
<textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
This is a good case for CSS positioning. Elements with position:absolute are positioned relative to their closest positioned parent. That means we can anchor the labels to the top/left of their containers using position:relative on the <ol>, and position:absolute on the label.
Example here: http://jsfiddle.net/YhQYS/1/
HTML:
<form action="." method="post">
<ol>
<li class="recent-data">
<strong>Recent data</strong>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
</li>
<li class="new-data">
<label>New data</label>
<textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
CSS:
form > ol {
background: #98c8dc;
font-family: serif;
}
.recent-data > ol,
.new-data > ol {
list-style: none;
padding: 5px 10px 5px 0;
line-height:20px;
}
.recent-data li { padding-left:5px; }
.recent-data,
.new-data {
position:relative;
padding-left:140px;
}
.recent-data strong,
.new-data label {
position:absolute;
left:10px;
line-height:20px;
}
.recent-data strong { bottom:5px; }
.new-data label { top:5px; }
.new-data textarea {
font-family:serif;
font-size:100%;
padding:4px;
}
This is very simple to reason about, and reliable cross-browser. Note that you shouldn't use a <label> that doesn't have a correspondent form control.
But that stuff looks like tabular data... it's your choice, we don't have enough context to know what mark-up is more appropriate. So here is a more semantically correct approach using tables, rowspan and vertical-align:
HTML:
<form action="." method="post">
<table id="results">
<tbody>
<tr>
<th rowspan="4" scope="row" class="recent-label">Recent data</th>
<td>2</td>
<td>47</td>
</tr>
<tr>
<td>3</td>
<td>99</td>
</tr>
<tr>
<td>5</td>
<td>98</td>
</tr>
<tr>
<td>5</td>
<td>98</td>
</tr>
<tr>
<th rowspan="1" scope="row" class="new-label">New data</th>
<td colspan="2" class="new-data">
<textarea>23</textarea>
</td>
</tr>
</tbody>
</table>
</form>
CSS:
form {
background: #98c8dc;
font-family: serif;
}
#results th,
#results td {
padding:3px 5px;
}
#results .recent-label {
vertical-align:bottom;
}
#results .new-label {
vertical-align:top;
}
#results .new-data {
padding-left:0px;
}
#results textarea {
padding:4px; // +1px border
font-size:100%;
font-family:serif;
}
Sample at http://jsfiddle.net/quqf8/1/
If you want stuff to behave like a table, display it like a table. Use CSS's table, table-row and table-cell for the display property of the elements. You can then use vertical align and other table 'only' stuff. Note that I used > for the CSS selectors so the internal lists don't get those styles too.
http://jsfiddle.net/nQWBw/2/
CSS:
.table-like {
display: table;
border: 1px solid red;
background: #98c8dc;
margin: 0;
padding: 0;
}
.table-like > LI {
display: table-row;
border: 1px solid lime;
list-style: none;
margin: 0;
padding: 0;
}
.table-like > LI > LABEL ,
.table-like > LI > OL ,
.table-like > LI > TEXTAREA {
display: table-cell;
border: 1px dashed magenta;
/* padding: 5px 10px; */
vertical-align: top;
}
.table-like LI:first-child > *{
vertical-align: bottom;
}
.table-like > LI > OL > LI {
display: block;
margin: 0;
padding: 0;
}
HTML:
<form>
<ol class="table-like">
<li>
<label>Recent data</label>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
</li>
<li>
<label>New data</label>
<textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
Remove the border and padding from the textarea and set it to the same font.
Roughly, http://jsfiddle.net/vP7As/1/
here is a solution. no table, no jquery, just add one p tag in first lable
Demo in fiddle
Tested in safari 15, firefox 6, and ie8.
I think you should set a line-weigh for caculate. In example, I set 18px so that the whole height in <ol><li>3 99...</ol> is (18+5+5)*4=112px(two 5px for your li:padding height), then add one p tag easy for a position control.
HTML part:
<form>
<ol>
<li>
<label><p>Recent data</p></label>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
</li>
<li>
<label>New data</label>
<textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
CSS part:
form{font:14px/18px arial;}
form label {
width: 140px;
float: left;
}
form>ol>li>label {
height: 112px;
position:relative;
}
form>ol>li>label>p {
position:absolute;
bottom:5px; /* 5px for the last li(28.96) padding-bottom:5px */
left:0;
}
form ol li {
background: #98c8dc;
list-style: none;
padding: 5px 10px;
}
Try this:
Using some position: reltive; you can make it all line up.
<html>
<head>
<style type="text/css">
form {
background: #98c8dc;
padding: 5px 10px;
}
form label {
width: 140px;
float: left;
position: relative;
bottom: 20px;
display: block;
}
form label span {
display: block;
}
form ol li {
display: table-row;
list-style: none;
}
#area {
position: relative;
right: 5px;
}
</style>
</head>
<body>
<form>
<label> </label>
<ol>
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>28 96</li>
</ol>
<label><span>Recent data</span>New data</label>
<textarea id="area" placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</form>
</body>
</html>
However it does look like you are working with tabular data, in which case simply using a table would probably be the best way to do it.
Vertical align works with inline-block elements
http://jsfiddle.net/s3ayp/
<!-- HTML -->
<form>
<ol>
<li class="lineup lineup-bottom">
<label >Recent data</label>
<ol>
<li class="first">3 99</li>
<li>5 98</li>
<li>15 97</li>
<li class="last">28 96</li>
</ol>
</li>
<li class="lineup lineup-top">
<label>New data</label>
<ol>
<li>
<textarea placeholder="30 95" rows="4"></textarea>
</li>
</ol>
</li>
</ol>
</form>
/* CSS */
.lineup > * {
display: -moz-inline-box; /* FF 2 */
display: inline-block;
}
*:first-child + html .lineup > * { /* IE7 hack */
display: inline;
}
.lineup.lineup-top > * {
vertical-align: top;
}
.lineup.lineup-bottom > * {
vertical-align: bottom;
}
form label {
width: 140px;
vertical-align: bottom;
}
ol {
background: #98c8dc;
list-style: none;
}
ol li {
padding: 5px 10px;
}
ol li.first {
padding-top: 0
}
ol li.last {
padding-bottom: 0
}
Some JQuery
You can set label padding dynamically with jquery using list element number.
http://jsfiddle.net/uSehQ/2/
<script type="text/javascript">
$(document).ready(function() {
var size = $("#data").children().size();
var top = 5+30*(size-1);
$("#label").css("padding", top+"px 0 0 0")
});
</script>
<style>
form label {
width: 140px;
float: left;
}
form ol li {
background: #98c8dc;
list-style: none;
padding: 5px 10px;
}
</style>
<form>
<ol>
<li>
<label id="label">Recent data</label>
<ol id="data">
<li>3 99</li>
<li>5 98</li>
<li>15 97</li>
<li>20 25</li>
<li>30 95</li>
</ol>
</li>
<li>
<label>New data</label>
<textarea placeholder="40 76" rows="4"></textarea>
</li>
</ol>
</form>