I'm trying to style two unordered lists differently on my page - no list style for the nav at the top, and regular list styling in the form.
Here's my simplified markup:
<html>
<head>
<style>
nav
{
background-color:lightgrey;
}
nav ul, li
{
list-style:none;
display:inline-block;
}
form ul, li
{
color:red;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</nav>
<form>
<ul>
<li>Form Item 1</li>
<li>Form Item 2</li>
<li>Form Item 3</li>
</ul>
</form>
</body>
When this is run, both the nav and form ULs are coloured red and also lack list styling.
Replace nav ul, li
with nav ul, nav li
and form ul, li
with form ul, form li
.