Please help with CSS, I am newbie

Down I copied css from some tutorials where it is explained nesting. I dont understand how can “span” have two classes (.external) and class (.link).

Secondly, how all that can be inside a [href]?

div#four .main a[href] span.link.external{
color:red;
front-weight: bold;
}

It might help if you posted the CSS.

However, any element can have two or even more classes. The browser will apply the styles from both (or all) classes as well as any inherited styles according to the cascading rules.

Not hard…

<a href="www.example.com"><span class="link external">This will be red and bold</span> This will not.</a>

a[href] doesn’t mean “inside href attribute of <a>
it means “inside <a> which has non-empty href attribute”

2 Likes

An element (SPAN or other wise) can have as many classes as you’d like; that’s the beauty of classes. On CSS technique, commonly known as ‘opt-in classes’ takes advantage of this fact, allowing you to separate common properties and add them as need be. For example you could define a class of shapes (square , circle) , and a separate for color ( red, blue, green)

it’s important to know about CSS specify to best take advantage of this.

SECOND: It is NOT inside an ‘href’. What you are referring to is actually called an “attribute selector”. CSS allows you to target an element via any valid attribute and it’s value.

a[href] = the anchor (A) tag with the attribute HREF present. ( as opposed to a plain anchor with has no HREF attribute.

hope that clears things up :slight_smile:

Technically it just needs to be there. E.g. <a> won’t work, while <a href=""></a> will.

1 Like

Sure, but maybe someone still use anchors like <a name="topic"></a>

The attribute selector is REALLY powerful. Don’t limit yourself. For example:

a[href^="http://sitepoint.com/formus"] {
 color:green;
}
a[href^="http://sitepoint.com/articles"] {
    color:red;
}

would allow you to style any links for the SP forum section differently from links to an article section. You wouldn’t even have to assign specific classes either, the value of the attribute would serve as the selector.

What does that have to do with my point? (Not trying to sound rude here) :slight_smile: .

That href isn’t mandatory for <a> to “work” in some cases.

As Ryan said - that has nothing to do with a[href] matching <a href=""> which has an empty href attribute. a[href] doesn’t check for a non-empty href, it checks for whether the href exists or not (and matches even if it is empty as long sas it actually exists)

<a> tags with a href attribute behave differently from those without even with CSS since :link :visited :focus :hover and :active only apply where there is a href attribute.

I’d expect a:link and a[href] to target the same links except for possibly having a different .precedence. Neither would target <a name="topic">- of course without an id in that tag as well as the name it will not actually do anything in some more modern browsers given that the name attribute on that tag has been obsolete since 1997.

No. Ryan said that <a> will not “work” without href. I just noted that it can be used without href, as an anchor. But I didn’t say that it is supposed to be used that way.

Edit: seems like I misunderstood Ryan words. He meant “CSS selector will not work”, but I thought he means “tag will not work”. My bad, sorry.

Which browsers? It still works everywhere.

It is valid in HTML 4.0.1. Next version, HTML 5, was released only in 2014. So I don’t know how can it be obsolete since 1997 if it was a part of spefication that was actual until 2014.

Megazoid, you made the statement…

“non-empty href attribute” is significant because that describes an href attribute that has a value, it does not mean that the href attribute must exist.

Ryan’s response

is exactly correct.

While you may have intended to say that the “href” attribute must exist, you actually said that it must contain a value… “a non-empty href attribute”… which is not true… all it has to do is exist.

If there is no href attribute, then the selector is not targeted, as you subsequently said.

English can be a tricky language.

Yeah, that what’s happening when uneducated russian dumb tries to discuss with serious men :smile:

1 Like

My mistake, it is valid according to the standard but superseded by the id attribute which the standard appears to indicate is the preferred option - which is presumably why some browsers dropped support for name.

You have to read it kind of backwards.
div#four .main a[href] span.link.external means:

  • find a span with BOTH classes “link” and “external”
  • that is inside an “a” tag that has a “href” attribute
  • that is inside any element with class of “main”
  • that is inside of a div with id “four”

Like this:

<div id="four"><p class="main"><a href="#"><span class="link external">Example</span></a></p></div>

By the way, that’s not good HTML or CSS. There’s too much nesting in both languages. Normally you can do better. But I hope that clarifies the answer for you.

1 Like

That wasn’t my point. My point was that in order for a[href] to be read, it just has to be on an anchor, not necessarily empty. E.g. <a href>.

Edit - seems Ron and Stephen sorted this out.

Seems i figure out problem, thnx guys

Please tell us what you found.

{front-weight} perhaps?

Hi, I have new question a bit offtopic sorry, could someone explain why i have to use some tags. Example :

<p>Now I go to <del>school</del> <ins> college<ins/></p> Why here I have to use <ins> tag when i can get same result with following code

<p>Now I go to <del>school</del> college</p>