Please help with CSS, I am newbie

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>

Html isn’t about ‘results’ or presentation its about structure.

In the first example it is clear from the mark up that the word school was deleted and the word college inserted.

In the second example the only certain thing is that the word school was deleted but we do not know with what it has been replaced (although we can obviously guess but that’s not the point). It’s usually used when published text has later been changed to show that the text and therefore the meaning may have changed also.

When you add the correct semantics to a document it allows tools/screen readers/ authors to extract more pertinent data from them.

3 Likes

I suppose you could use that markup to allow a user to display a pre-edit version, if you applied css to hide the <ins> and show the <del>, that way you would not need to have the two separate versions.

Hello, could you explain pseudo elements, I checked on w3schools but i still dont understand .Why we should use them instead of common elements. Purpose?

We do not use them instead of common elements.
We use them in addition to common elements.

They provide additional styling capabilities without requiring additional HTML.

I cant figure out why we need style links with pseudo elements. How it would look like without them?

Does this article help to explain pseudo-elements for you?

1 Like

Show the HTML and related CSS code that is puzzling you.

Open a page in your favorite browser that uses pseudo-elements in the CSS.

Read the code so you can try to understand what the styles say they should do.

Comment out the pseudo-elements in the CSS.

Open the page in another tab (or window) in your browser.

Compare the page in the first tab with the page in the second tab and see what is different.

Pseudo elements is just a way to define different styles for different link states.
Each link can have many states: regular, hovered, clicked (active), focused.

This is how you make your link green in regular state (when it’s just displayed):

a { 
    color: green; 
}

But what if you do want that link to become red when user puts mouse cursor over it?
Here is where pseudo-element comes to help:

a:hover {  /* this rule applies when <a> is hovered by mouse */
    color: red;
}

After reading @megazoid’s post, I wonder if you are referring to pseudo-classes as pseudo-elements. You do mention a link.

Please read this and see if it helps…

http://www.growingwiththeweb.com/2012/08/pseudo-classes-vs-pseudo-elements.html

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.