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
  • 115 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Xecantur

Dani AI

Generated

Two quick fixes that explain what happened and how to do it cleanly.

As noted, standard CSS does not allow nested rule blocks — putting a selector block inside another rule makes the inner block invalid and the browser ignores it. There was also a simple typo in the original .nstyle rule (backgroud-color), which prevents that property from working. Both together explain why the nav anchors did not pick up the orange color.

To target those links use a descendant selector that starts with the class, then the structural path to the anchors. Prefer styling the anchor itself (and include :visited, :hover, :focus) rather than only :link, since :link matches only unvisited links. Also avoid inline style attributes for list resets and do not use the deprecated <center> element — center with CSS instead.

A compact, practical example (put this in a stylesheet, not nested inside another rule):

.nstyle nav ul { list-style: none; margin: 0; padding: 0; }
.nstyle nav a, .nstyle nav a:visited { color: #ff8c00; text-decoration: none; }
.nstyle nav a:hover, .nstyle nav a:focus { color: #000; background-color: #ff8c00; box-shadow: 0 0 0 3px rgba(255,140,0,0.25); }

If a rule still seems not to apply, open DevTools and inspect the computed styles to find typos, specificity conflicts, or inline styles. Clear cache after edits. For nested-rule syntax you can use a preprocessor (Sass/LESS) or write explicit selectors; see MDN for selector combinators and specificity for more detail: Descendant combinator and Specificity.

Recommended Answers

All 4 Replies

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.