This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Sergeant Shift
almost 9 years

2.3 ul a vs li a

I can use it like this:

ul a {
      text-decoration:none;
     font-family:cursive;
}

Or like this:

li a {
     text-decoration:none;
     font-family:cursive;
}

which one is better to use?

thanks

Answer 5531714d51b8879faa000354

3 votes

Permalink

I have a gripe… BETTER TO USE seems to be a common theme for you. This is highly indicative of black and white thinking. Nothing stymies imagination and creativity (and learning in general) more than black and white thinking. In programming it will be your nemesis.

Better (there now you’ve got me doing it) that we think in terms of gray. Let the homogeneity show through. There is a mixture of approaches we can take to almost every problem, and often more than one solution that works, is viable and is practical. There will be others that shoot for the moon to clear to fence, and some that are just way out there, but for the most part, we can reel those ones back in to the heliosphere.

Style sheets have context, just as objects do. We can visualize this context in the inheritance chain…

<ul>
    <li><a></a></li>
    <li><a></a></li>
</ul>

The anchor element is in two contexts, that of the LI, and also that of the UL. If we look more closely, we see that a rule such as,

li a {}

is less specific than,

ul a {}

in that the latter rule applies only to unordered lists, while the former to all lists. Choose your context wisely, and go with the one that has a narrower focus, unless a broader, more generalized rule is what you want.

There is no ‘better’ here. It’s a matter of context and application that determines what will work most reliably for you.

points
Submitted by Roy
almost 9 years

Answer 5531727086f552ac6200039d

1 vote

Permalink

As an example, let’s say we want a general rule for all anchors in lists:

li a {
    text-decoration: none;
    color: blue;
}

but we wish to have links in unordered lists all green:

ul a {
    color: green;
}

Because this rule FOLLOWS the previous one in the cascade, it will take precedence in any conflict between the two rules. color:green will win out, but only in unordered lists.

points
Submitted by Roy
almost 9 years

1 comments

Sergeant Shift almost 9 years

thanks