Member Avatar for Xecantur

I'm not quite sure how to word it but I have a group of tags I want to style

nav->ul->li->a but I'm not sure what the syntax is to specify it I've tried just about every combination I can think of

current code:

<!DOCTYPE html>
<html>
<head>
    <title> Site One</title>
    <meta charset="UTF-8"/>
    <style>
    .firststyle {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
    }
    .nstyle {
    backgroud-color: black;
    color: orange;
    margin:20px;
    padding:20px;
    nav,ul,li,a:link { color: orange; }
    }
    </style>
</head>
<body>
    <div class="firststyle">
    <center>
    <h1> Site One</h1>
    </center>
    <div class="nstyle">
    <nav>
        <ul style="list-style: none;">
            <li><a href="p_one.html">Page One</a></li>
            <li><a href="p_two.html">Page two</a></li>
        </ul>
    </nav>
    </div>
    <p>
    This is my testbed for HTML5/CSS and Javascript
    </p>
    </div>
</body>
</html>

Combinations I've tried:

nav > ul > li > a:link { color: orange; }

nav, ul, li, a:link { color: orange; }

nav.ul.li.a:link { color: orange; }

nav ul li a:link { color: orange; }

nav + ul + li + a:link { color: orange; }
  • 2 Contributors
  • 4 Replies
  • 104 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Xecantur
Member Avatar for gentlemedia

Not sure what you want to make orange, but you have on line 18 a CSS block in another CSS block. That is not going to work.
Take it out of that CSS block.

.nstyle {
    backgroud-color: black;
    color: orange;
    margin:20px;
    padding:20px;
}

.nstyle nav a:link { color: orange; }
Edited by gentlemedia
Member Avatar for Xecantur

my understanding was that was a class and that sub blocks of CSS would work ? the intent was to make a class that would stylize the nav bar links ie change them to orange but I suppose that might not be possible?

Member Avatar for gentlemedia

If you want to nest CSS blocks, you will need to write your CSS with a CSS preprocessor like SASS or LESS.

Member Avatar for Xecantur

oh wait, just noticed you did what I was looking for, didn't see the .nstyle class in front of the rest, guess it pays to do a double take ;p thanks, I wasn't aware you could add to the class outside the scope, coming from C++ CSS is pretty weird ;p thanks again

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.