Embedded and Internal CSS not affecting my lists - html

I am trying to get it so that my ingredients list is green, my equipment is red and my method list is blue. I am trying to use all different types of css to achieve this. My external works fine as that is the red one but, my two types of internal don't seem to change the other lists.
<!DOCTYPE html>
<html>
<head>
<style>
ol {color: blue;
font-style: italic;
}
</style>
<title>Emily's Cooking Page</title>
<link rel="stylesheet" href="demo1.css" />
</head>
<body>
<h1>Cooking for Students</h1>
<p>This page will show you how to make basic <b>macaroni</b> with all shop bought ingredients & how to store it properly</p>
<img src="macaroni.jpg" width="104" height="142">
<table>
<tr><td>prep: 5 minutes</td></tr>
<tr><td>cook: 30 minutes</td></tr>
<tr><td>difficulty: easy</td></tr>
<tr><td>quantity made: 3 to 4 meals</td></tr>
</table>
<h2>ingredients</h2>
<p>all found in Morrisons supermarkets</p>
<ul style="color:green;">
<li>250g pasta</li>
<li>300g cheese sauce</li>
</ul>
<h2>equipment</h2>
<ul>
<li>saucepan</li>
<li>wooden spoon</li>
<li>oven with hob</li>
<li>two to three tubs</li>
</ul>
<h2>method</h2>
<ol>
<li>On oven, turn hob to high heat. Fill a large saucepan with water and place on hob, allow water to begin boiling.</li>
<li>Once water is boiling, put all 250g of pasta into the saucepan and begin stirring with a wooden spoon.</li>
<li>Boiling pasta for 20 minutes or until soft. Use a knife or fork to test how hard the pasta is.</li>
<li>Take the saucepan off the hob and turn the hob down to a low heat. Using a sieve, drain all the water out of the saucepan and place pasta back into saucepan.</li>
<li>Place saucepan back on the hob and add 300g of cheese sauce to saucepan.</li>
<li>Mix the cheese sauce and pasta for 5 minutes</li>
<li>Turn hob off. Spread the macaroni into two or three separate tubs and allow them to cool down. Alternatively, you can eat one serving straight after cooking.</li>
<li>Once cooled down, place in fridge. To eat, place in microwave for 1 minute and a half, stir, then another minute (you can even add grated cheese on top after stirring).</li>
<li>After two days, move tubs to the freezer, to de-frost, place tub back in fridge and allow for one day of defrosting in fridge before microwaving and serving.</li>
</ol>
<p>Other Recipes:</p>
BBC GoodFood Macaroni Recipe
<p></p>
Food Network Macaroni Recipes
</body>
</html>


The following rule applies to all ordered lists.
ol {
color: blue;
font-style: italic;
}
Therefore, all ol should have blue color.
The ingredients list is a ul and has the inline styling of green color:
<ul style="color:green;">
<li>250g pasta</li>
<li>300g cheese sauce</li>
</ul>
Following your way, in order to apply the red color to the equipment list you can write:
<ul style="color: red">
<li>saucepan</li>
<li>wooden spoon</li>
<li>oven with hob</li>
<li>two to three tubs</li>
</ul>
However, I would suggest to create three classes for each color.
For example,
.color-blue {
color: blue;
}
.color-red {
color: red;
}
.color-green {
color: green;
}
<ul class="color-green;">
<li>250g pasta</li>
<li>300g cheese sauce</li>
</ul>
<ul class="color-red;">
<li>saucepan</li>
<li>wooden spoon</li>
<li>oven with hob</li>
<li>two to three tubs</li>
</ul>
<ol class="color-blue">
<li>On oven, turn hob to high heat. Fill a large saucepan with water and place on hob, allow water to begin boiling.</li>
...
...
</ol>

Related

My Movie Review Wont Work and Tried Everything

So Every Time I type a movie in it dosent show up which it should I dont know what to Ive tried everything
// Get input element
let filterInput = document.getElementById('filterInput');
// Add event listener
filterInput.addEventListener('keyup', filterNames);
function filterNames(){
// Get value of input
let filterValue = document.getElementById('filterInput').value.toUpperCase();
// Get names ul
let ul = document.getElementById('names');
// Get lis from ul
let li = ul.querySelectorAll('li.collection-item');
// Loop through collection-item lis
for(let i = 0;i < li.length;i++){
let a = li[i].getElementsByTagName('a')[0];
// If matched
if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css">
<title>NinjaWolf Movie Review</title>
</head>
<body>
<div class="container">
<h1 class="center-align">
Movies Watched
</h1>
<h4 class="center-align">
*Spoiler Warning*
</h4>
<input type="text" id="filterinput" placeholder="Search Movie">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>2019</h5>
<li class="collection-item">
ARMY OF DARKNESS
</li>
<li class="collection-item">
THE CLOVERFIELD PARADOX
</li>
<li class="collection-item">
CLOVERFIELD (2008)
</li>
<li class="collection-item">
INSIDIOUS: CHAPTER 2
</li>
<li class="collection-item">
INSIDIOUS
<li class="collection-item">
TERMINATOR: DARK FATE (2019)
</li>
<li class="collection-header">
<h5>November</h5>
</li>
<li class="collection-item">
EVIL DEAD II
</li>
<li class="collection-item">
TRANSFORMERS
</li>
<li class="collection-item">
JOKER
<li class="collection-item">
INDEPENDENCE DAY
</li>
<li class="collection-item">
MISSION: IMPOSSIBLE FALLOUT M:I-6
</li>
<li class="collection-item">
<a href="file:///D:/Website/Movie%20Review/Movies/BLACK%20MIRROR.html">BLACK MIRROR (2011 - )
</li>
<li class="collection-item">
THE LION KING(2019)
</li>
<li class="collection-item">
TERMINATOR 2: JUDGEMENT DAY
<li>
<li class="collection-item">
MISSION: IMPOSSIBLE ROUGE NATION M:I-5
</li>
<li class="collection-item">
MISSION: IMPOSSIBLE GHOST PROTOCOL M:I-4
</li>
<li class="collection-item">
DADDY'S HOME 2
</li>
<li class="collection-item">
HAPPY DEATH DAY 2 U
</li>
<li class="collection-item">
DADDY'S HOME
</li>
<li class="collection-item">
HAPPY DEATH DAY
</li>
<li class="collection-item">
THE MAZE RUNNER
</li>
<li class="collection-item">
ASSASSIN'S CREED
</li>
<li class="collection-item">
Galaxy Quest(1999)
</li>
<li class="collection-header">
<h5>October</h5>
</li>
<li class="collection-item">
Goosebumps 2(2018)
</li>
<li class="collection-item">
THE EVIL DEAD(1981)
</li>
<li class="collection-item">
EVIL DEAD(2013)</li>
<li class="collection-item">
LOVE DEATH + ROBOTS(2018)
</li>
<li class="collection-header">
<h5>September</h5>
</li>
<li class="collection-item">
MAMMA MIA
<li class="collection-header">
<h5>2018</h5>
</li>
<li class="collection-item">
ANON(2018)
</li>
</ul>
<br/>
</div>
<div class="card">
<h2>Stranger Things (Season 3)</h2>
<h4>July 17, 2019 - July 18, 2019, Stranger Things (Season 3) is about In the summer of 1985 in Hawkins, the new Starcourt Mall has become the focal point of the town, driving other stores out of business. Sheriff Jim Hopper is conflicted over Eleven and Mike's budding relationship, while Joyce considers moving out of Hawkins for better prospects, leaving the state of the children's friendships and her relationship with Hopper in the air. However, strange power fluctuations trigger Will's awareness of something otherworldly, and Eleven and Max sense something is off about the town's residents, and despite having closed the portal to the Upside Down, fears that they are all in danger from it still.</h4>
<div class="img-wrapper">
<img src="./img/ST3.png" alt="ST3">
<p>I watched Stranger Things(Season 3) on July, 17, 2019 and I loved it and Stranger Things Season 3 had an upgrade because they went into the Gorrer selection and when they cut her leg open I just couldn't watch and I know hooper is still alive and remember that scene where Steve knocks that Russian out if that was me I would have said <b>"Fuck Mother Russia"</b> and Fun Fact I always watch Stranger Things (Season 3) with my Dad and my Brother got interested in Stranger Things when Season 2 came out and my Sister said we should watch it all together but my Brother said "No Way" and watched it without us and so while we watched Stranger Things (Season 3) he was playing Apex Legends I finished it on July 18, 2019, <p>
<br> <br/>
</div>
</div>
<div class="card">
<h2>RWBY: Volume 2 (2014)</h2>
<h4>July 4, 2019, RWBY: Volume 2 is about Team RWBY begins their second semester and try to take down a crime syndicate, a task that mabye far too difficult</h4>
<img src="./img/RWBY.jpg" alt="RWBY">
<p>I watched RWBY: Volume 2 on July, 4, 2019, I loved it because it introduced alot of new characters to RWBY and a lot of backstory even though my big brother hates the animation and I love it I cant wait to watch more RWBY</p>
<br/>
</div>
<div class="card">
<h2>Spider-Man: Far from Home(2019)</h2>
<h4>June 4, 2019, Spider-Man: Far From Home is Following the events of Avengers: Endgame (2019), Spider-Man must step up to take on new threats in a world that changed forever.</h4>
<img src="Spider-Man.jpg" alt="Spider-Man: Far from Home">
<p>I watched on July 2, 2019, my Big Brother took me and my sister to Spider-Man: Far from Home as a surprise and was a great a movie and my Brother Neil thought Mysterio was great. But then the credits ruined it the whole revealing identity. what is a head-scratcher is there were only a couple of people because it was the day it comes into theaters. and in the quote of Neil "The comics after Civil War where horrible" and my Dad always told me <b>"Joshua one of these days MARVEL
will have a downfall and decrease"</b> after thinking out it I think the day has come where MARVEL has failed</p>
<br/>
</div>
<h2>RWBY: Volume 1(2013)</h2>
<h4>June 16, 2019, RWBY is about In the land of Remnant, where boys and girls train to become huntsman and huntresses, 4 color-coded Teenage girls form who Team RWBY and train to fight crime and monsters known as the Grimm, team up to fight the mysterious shadow organization in this action-packed animated series from Rooster Teeth.</h4>
<div class="image-wrapper">
<img src="RWBY.png" alt="RWBY">
</div>
<p>I watched RWBY: Volume 1 on June 14, 2019, it was an Amazing Movie or Tv Show cause I thought it was a Movie but in actuality it was a TV Show ever episode combined into a movie and I originally got into the TV Show because I would listen to the soundtrack on Pandora and then I decided that since it was on Amazon Prime I would watch it and that the category: American animated series</p>
<br/>
<div class="card">
<h2>Dragon Prince(2018)</h2>
<h4>June 10, 2019, Dragon Prince is about An extraordinary discovery inspires two human princes and an elven assassin to team up on an epic quest to bring peace to their warring lands.</h4>
<div class="image-wrapper">
<img src="http://www.nerdreport.com/wp-content/uploads/2019/02/MV5BZDkzYzZjMmItYmE1Ny00MzJkLWFkOGItOWRiNjA0M2RiOWY2XkEyXkFqcGdeQXVyMTMxODk2OTU#._V1_.jpg" alt="Dragon_Prince">
</div>
</div>
<p>I watched Dragon Prince on June 1, 2019, It was Amazing, Excellent, Stunning, Beautiful it was a TV Show. People recommended it to my sister we were laughing almost the entire time. And we were shocked to know the actor of Zuko(The Last Airbender) We loved it can't wait for the next episode</p>
<br/>
<div class="card">
<h2>Good Omens</h2>
<h4>June 2, 2019, Good Omens is a television serial based on the 1990 novel Good Omens: The Nice and Accurate Prophecies of Agnes Nutter, Witch by Terry Pratchett and Neil Gaiman. It's about A tale of the bungling of Armageddon features an angel, a demon, an eleven-year-old Antichrist, and a doom-saying witch.</h4>
<div class="image-wrapper">
<img src="https://i2.wp.com/www.geektown.co.uk/wp-content/uploads/2017/08/goodomens.jpg?zoom=2.625&y=850%2C370&ssl=1" alt="Good_Omens">
</div>
</div>
<p>I watched Good Omens on May 31, 2019, It's an amazing TV show we were laughing almost the whole time throughout the first Episode and the TV Show that Book is Based on is something I enjoy because they are making fun of Christianity.</p>
<br/>
<div class="card">
<h3>IT(2017)</h3>
<h5>May 3, 2019, IT retroactively as IT Chapter One)is a 2017 American supernatural horror film based on Stephen King's 1986 novel of the same name. Produced by New Line Cinema, RatPac-Dune Entertainment, KatzSmith Productions, Lin Pictures, Vertigo Entertainment, and distributed by Warner Bros. It is the second adaptation of the novel following Tommy Lee Wallace's 1990 miniseries, and a sequel is planned. The film tells the story of the summer of 1989 In the Town of Derry a group of bullied kids "The Losers Club" together to destroy a shape-shifting monster, which disguises itself as a clown and preys on the children of Derry, their small Maine town
</h5>
<div class="image-wrapper">
<img src="https://upload.wikimedia.org/wikipedia/en/5/5a/It_%282017%29_poster.jpg" alt="IT">
<p>I watched IT on May 3, 2019, an Holy Shit this scared me out of my skin and gave me chills down my spine and I was cussing almost the entire movie it scared the Living Shit out of me. I can't wait for Chapter 2 because it has James McAvoy
</div>
</div>
<div class="card">
<h3>TAG(2018)</h3>
<h5>April 29, 2019, Tag is a 2018 American comedy film directed by Jeff Tomsic(in his directorial debut)
and written by Rob McKittrick and Mark Steilen. The film is based on a true story that was published in The Wall Street Journal about a group of grown men played by Ed Helms, Jake Johnson, Hannibal Buress, Jon Hamm, Jeremy Renner, who spend one month a year playing a game of tag.
</h5>
<div class="image-wrapper">
<img src="https://image.tmdb.org/t/p/w500/eXXpuW2xaq5Aen9N5prFlARVIvr.jpg" alt="TAG" >
<p>I watched Tag on April 29, 2019, I watched Tag and OMG it was Terrific and
I imagine me all grown up and playing Tag with friends because I also love Tag.
I would give it 100% on Rotten Tomato and Me and Dad laughed almost the entire Movie</p>
</div>
</div>
<div class="card">
<h3>Avengers: Endgame(2019)</h3>
<h5>April 30, 2019, Avengers: Endgame takes place 22 or 21 days After the devastating events of Avengers: Infinity War(2018) the universe is in ruins.
With the help of remaining allies, the Avengers assemble once more to undo Thanos' actions and restore order to the universe.
It was filmed back to back with Avengers: Infinity War based on the Marvel Comics film was Directed by Anthony and Joe Russo and
Avengers: Endgame was widely anticipated, and Disney backed the film with extensive marketing campaigns. It also broke numerous box office records and has grossed over $1.4 billion worldwide,
becoming the highest-grossing film of 2019, as well as the eighth highest-grossing film of all time </h5>
<div class="image-wrapper">
<img src="https://cnet3.cbsistatic.com/img/xLgPeuq6CW9A2N2V2kKmhMT6h2o=/1092x0/2019/03/14/dd4d8d9c-5f16-4f6b-a7d8-65a00d095c2c/avengers-endgame-poster-square-crop.jpg" alt="AVENGERS_ENDGAME">
</div>
</div>
<p>I watched Avengers: Endgame on April 28, 2019, it was a masterpiece, me and my Dad, my Big Sister, my Big Brother all loved it we were laughing almost the entire Movie and 100% on Rotten Tomato.
and I loved the thought of them Time Traveling and the look on my Dads face was priceless when they time travled 2013
<br/>
</body>
</html>

let filterInput = document.getElementById('filterInput');
... selects the first element in DOM with an id value of filterInput. Unfortunately, you have 0 elements in your markup with that id value. You probably want to use
let filterInput = document.getElementById('filterinput');
^
In the future, whenever you're getting unexpected results, use a console.log() (or a breakpoint) to look at what's inside your variables. In your case,
let filterInput = document.getElementById('filterInput');
console.log(filterInput);
... would have immediately revealed the problem.
Welcome to StackOverflow!
See it working:
let filterInput = document.getElementById('filterinput');
filterInput.addEventListener('keyup', filterNames);
function filterNames() {
const filterValue = filterInput.value.toUpperCase();
const ul = document.getElementById('names');
const li = ul.querySelectorAll('li.collection-item');
for (let i = 0; i < li.length; i++) {
const a = li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css" rel="stylesheet"/>
<div class="container">
<h1 class="center-align">
Movies Watched
</h1>
<h4 class="center-align">
*Spoiler Warning*
</h4>
<input type="text" id="filterinput" placeholder="Search Movie">
<ul id="names" class="collection with-header">
<li class="collection-header">
<h5>2019</h5>
</li>
<li class="collection-item">
<a href='#'>ARMY OF DARKNESS</a>
</li>
<li class="collection-item">
<a href='#'>THE CLOVERFIELD PARADOX</a>
</li>
<li class="collection-item">
<a href='#'>CLOVERFIELD (2008)</a>
</li>
<li class="collection-item">
<a href='#'>INSIDIOUS: CHAPTER 2</a>
</li>
<li class="collection-item">
<a href='#'>INSIDIOUS</a>
</li>
<li class="collection-item">
<a href='#'>TERMINATOR: DARK FATE (2019)</a>
</li>
<li class="collection-header">
<h5>November</h5>
</li>
<li class="collection-item">
<a href='#'>EVIL DEAD II</a>
</li>
<li class="collection-item">
<a href='#'>TRANSFORMERS</a>
</li>
<li class="collection-item">
<a href='#'>JOKER</a>
</li>
<li class="collection-item">
<a href='#'>INDEPENDENCE DAY</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE FALLOUT M:I-6</a>
</li>
<li class="collection-item">
<a href='#'>BLACK MIRROR (2011 - )</a>
</li>
<li class="collection-item">
<a href='#'>THE LION KING(2019)</a>
</li>
<li class="collection-item">
<a href='#'>TERMINATOR 2: JUDGEMENT DAY</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE ROUGE NATION M:I-5</a>
</li>
<li class="collection-item">
<a href='#'>MISSION: IMPOSSIBLE GHOST PROTOCOL M:I-4</a>
</li>
<li class="collection-item">
<a href='#'>DADDY'S HOME 2</a>
</li>
<li class="collection-item">
<a href='#'>HAPPY DEATH DAY 2 U</a>
</li>
<li class="collection-item">
<a href='#'>DADDY'S HOME</a>
</li>
<li class="collection-item">
<a href='#'>HAPPY DEATH DAY</a>
</li>
<li class="collection-item">
<a href='#'>THE MAZE RUNNER</a>
</li>
<li class="collection-item">
<a href='#'>ASSASSIN'S CREED</a>
</li>
<li class="collection-item">
<a href='#'>Galaxy Quest(1999)</a>
</li>
<li class="collection-header">
<h5>October</h5>
</li>
<li class="collection-item">
<a href='#'>Goosebumps 2(2018)</a>
</li>
<li class="collection-item">
<a href='#'>THE EVIL DEAD(1981)</a>
</li>
<li class="collection-item">
<a href='#'>EVIL DEAD(2013)</a></li>
<li class="collection-item">
<a href='#'>LOVE DEATH + ROBOTS(2018)</a>
</li>
<li class="collection-header">
<h5>September</h5>
</li>
<li class="collection-item">
<a href='#'>MAMMA MIA</a>
</li>
<li class="collection-header">
<h5>2018</h5>
</li>
<li class="collection-item">
<a href='#'>ANON(2018)</a>
</li>
</ul>
</div>

how to shift text or anchor tag on right?

I am trying to build a list using CSS. I am able to make the list using ul and li elements. I am facing one issue: my text or anchor tag text shows below the image.
It should only be on the right side of the image. How can I achieve that?
li a {
width: 40px;
border: 1px solid red;
//float:right
}
<ul xmlns="http://www.w3.org/1999/xhtml" class="content">
<li xmlns="http://www.w3.org/1999/xhtml">
<a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63085179,w-40,h-40/63085179.jpg">
<stname>Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets
against Vikram Kothari
</stname>
</a>
</li>
<li xmlns="http://www.w3.org/1999/xhtml">
<a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63085077,w-40,h-40/63085077.jpg">
<stname>BSF foils infiltration bid in Samba, ceasefire reported along LoC in Nowshera Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement Defence ministry admits to floundering ‘Make in India’, crippling delays in
arms procurement
</stname>
</a>
</li>
<li xmlns="http://www.w3.org/1999/xhtml">
<a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63084642,w-40,h-40/63084642.jpg">
<stname>Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement
</stname>
</a>
</li>
</ul>
View on JS Bin

(changed answer after comment)
Use display: inline-block for images and texts. In this case you have to define a width for both so they both fit into one line. In my example the width for the text is calc(100% - 46px);, which is the full width of the container minus the width of the image.
Here's the result:
li a {
width: 40px;
border: 1px solid red;
}
ul.content>li img,
stname {
display: inline-block;
vertical-align: top;
}
stname {
width: calc(100% - 46px);
}
<ul xmlns="http://www.w3.org/1999/xhtml" class="content">
<li xmlns="http://www.w3.org/1999/xhtml">
<a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63085179,w-40,h-40/63085179.jpg">
<stname>Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets
against Vikram Kothari
</stname>
</a>
</li>
<li xmlns="http://www.w3.org/1999/xhtml">
<a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63085077,w-40,h-40/63085077.jpg">
<stname>BSF foils infiltration bid in Samba, ceasefire reported along LoC in Nowshera Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement Defence ministry admits to floundering ‘Make in India’, crippling delays in
arms procurement
</stname>
</a>
</li>
<li xmlns="http://www.w3.org/1999/xhtml">
<a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63084642,w-40,h-40/63084642.jpg">
<stname>Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement
</stname>
</a>
</li>
</ul>

One option is to add something like the following styles
li img {
float: left;
clear: left;
width: 20%;
}
li stname {
width: 80%;
}
You need float the image left but you also need to set a width for the image and text so that the text never wraps under the image.
I have updated your jsbin: https://jsbin.com/layozexila/1/edit?html,css,output

How to get parent element and then next element by

I want to get the parent of specify element (span with class is mw-headline) and then get the first next element of this parent.
<h2>
<span class="mw-headline" id="Botany">Botany
</span>
<span class="mw-editsection">
<span class="mw-editsection-bracket">
</span>edit<span class="mw-editsection-bracket">
</span>
</span>
</h2>
<ul>
<li><i>Malus</i>, the genus of all apples and crabapples</li>
<li>Cashew apple, the fruit that grows with the cashew nut</li>
<li>Custard apple, several fruits</li>
<li>Love apple:
<ul>
<li>Tomato</li>
<li><i>Syzygium samarangense</i>, a plant species in the Myrtaceae family</li>
</ul>
</li>
<li>Mammee apple (disambiguation)</li>
<li>May apple (<i>Podophyllum peltatum</i>)</li>
<li>Oak apple, a type of gall that grows on oak trees</li>
<li>Rose apple (disambiguation), several fruits</li>
<li>Thorn apple (disambiguation):
<ul>
<li><i>Crataegus</i> species</li>
<li><i>Datura</i> species</li>
</ul>
</li>
<li>Wax apple (<i>Syzygium samarangense</i>)</li>
<li>Hedge apple (<i>Maclura pomifera</i>)</li>
</ul>
I want to get first ul after h2 tag has specify span with class is mv-headline.
From xpath, i have very simple soltuion:
$x('//span[#class="mw-headline"]/following::ul[1]')
But I don't know how select it in selector with get parent (.. in xpath) and next element (following::node in xpath) in my case.
Please give me a solution by CSS selector.
Thanks & Best Regards,
Phuong Hoang

You do one mistake in your XPath, xpath should be:
$x('//h2[//span[#class="mw-headline"]]/following::ul[1]')

how to add scrollbar to unordered list with marquee tag when mouse hovers the list?

<ul>
<marquee direction="up" loop height="450" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="4">
<li>DA SHEN-TAIWAN-CI ROTARY LETTER RPRESS FOR LAMINATE TUBE & LABELS PRINTING</li>
<li>DA SHEN-TAIWAN-INTERMITTENT (SEMI ROTARY) LETTER RPRESS FOR LABELS PRINTING</li>
<li>CBADEN-CHINA-FLATBED HOT FOLLING & DIE CUTTING MACHINE</li>
<li>CBADEN-CHINA-FLEXO PRINTING MACHINE FOR LABELS</li>
<li>CBADEN-CHINA-ROTARY DIE CUTTING MACHINE</li>
<li>LABELTECH-ITALY-LABELS SLITTING & 100% LABEL INSPECTION MACHINE</li>
<li>NARROW WEB FLEXO MACHINE FOR LABELS, SHRINK SLEEVES & PAPER BOARD PRINTING</li>
<li>VIDEO PLATE MOUNTER</li>
<li>ANILOX & PLATE CLEANING MACHINE</li>
<li>DOUBLE SIDE MOUNTING TAPE</li>
<li>CERAMIC ANILOX ROLLER & SLEEVES</li>
<li>MAGNETIC CYLINDER % PRINTING CYLINDER</li>
<li>UV LAMPS & CURING SYSTEM</li>
<li>ESTERLAM-UK-SYNTHETIC PLASTIC DOCTER BLADE</li>
<li>SDI-USA WEB CLEANER</li>
<li>PACKERS-KOREA-IML DIE CUTTING MACHINE</li>
<li>CI FLEXO MACHINE & ROTO GRAVURE</li>
<li>DRY & WET LAMINATION MACHINE</li>
<li>Corona Treater & PLASMA TREATER</li>
<li>LABEL APPLICTAER MACHINE</li>
<li>BOPP SELF ADSHEVIE FILM</li>
<li>BAR COATER</li></marquee>
</ul>
#products table tr td ul{
padding-left:30px;
padding-right: 30px;
overflow:hidden;
height: 400px;
width:300px;
color:floralwhite;
}
#products table tr td li{
padding:5px ;
}
i want to stop list moving when mouse is over it and also to get a scrollbar to scroll through the list items. i tried adding overflow:scroll which shows the scrollbar but i cannot scroll through whole list and list stops moving only when mouse is over list not whie its over scrollbar, and when mouse is over scrollbar list still moves .

set two elements width equal to container using bootstrap?

I have two div inside container and those divs should be settled according to the width of container and there should be a proper space between them
<div id="testimonial-wrapper">
<div class="container">
<ul class="inline-section row">
<li class="signature-interior-features green-background col-sm-5 col-md-5">
<div class="signature-interior-content">
<h2>Signature Interior Features</h2>
<ul>
<li>Full-sized washer and dryer in every home</li>
<li>Walk-in closets and walk-in pantries and
vaulted ceilings available*</li>
<li>Appliance packages with multi-cycle dishwasher,
range and frost-free refrigerators</li>
<li>Large stainless steel sinks with disposal</li>
<li>Linen closets</li>
<li>Cozy wood-burning fireplace in every home</li>
<li>Spacious patios with exterior storage</li>
<li>Individual hot water heaters</li>
<li>Electric HeatM</li>
<li>Pre-wired for phone, cable and high-speed Internet access</li>
<li>Interior packages available*</li>
</ul>
</div><!--signature-interior-content-closed-->
</li>
<li class="community-elements-details sky-background col-sm-5 col-md-5">
<div class="community-elements-content">
<h2>Community Elements</h2>
<ul>
<li>Clubhouse with social room and kitchen</li>
<li>Athletic center with cardio equipment and free weights</li>
<li>Sparkling outdoor swimming pool</li>
<li>Invigorating indoor spa</li>
<li>Complimentary tanning studio</li>
<li>Sports court</li>
<li>Close proximity to the Sounder commuter train and
the Super Mall</li>
<li>Only minutes to Emerald Downs and I-5 with
easy access to Highway 167 and Highway 18</li>
<li>Professional on-site maintenance</li>
<li>Professional on-site management
*in select apartment home</li>
</ul>
</div><!--community-elements-content-closed-->
</li>
</ul>
</div><!--container-closed-->
</div><!--testimonial-wrapper-closed-->