a vs a:link, What is the difference?
According to W3C a:link
is for not visited, a:visited
is for visited, and just a
applies to both.
difference between a and a: link and others
6.6.1.1. The link pseudo-classes:
:link
and:visited
User agents commonly display unvisited links differently from
previously visited ones. Selectors provides the pseudo-classes:link
and:visited
to distinguish them:
- The
:link
pseudo-class applies to links that have not yet been visited.- The
:visited
pseudo-class applies once the link has been visited by the user.
After some amount of time, user agents may choose to return a visited
link to the (unvisited) ‘:link
’ state.The two states are mutually exclusive.
Moreover, adding the :link
pseudo-class increases the specificity:
A selector's specificity is calculated as follows:
- count the number of ID selectors in the selector (=a)
- count the number of class selectors, attributes selectors, and pseudo-classes in the selector (=b)
- count the number of type selectors and pseudo-elements in the selector (=c)
- ignore the universal selector
link vs a : when to use one over the other?
Attributes are not the same as the tag they are in.
<link />
is an empty element, i.e. it can not have anything inside of it. All it does is specify a relationship with another document. Additionally, the <link>
tag is only used in the <head>
section.
<a></a>
on the other hand, is not an empty element and specifies an object to be created on the page - like a clickable link or image - which takes the user to some other location. This tag is only used in the <body>
section.
So, even though the tags can have the same attributes, that does not mean they do the same thing.
Difference between a and a:link
a:link
is specifically for links that have not been visited. a
applies to all <a>
elements.
CSS styling links: why a:link, a:visited vs just a
If you only style a {...}
then the style will be applied to all anchor elements including <a name="..."></a>
elements, which define an anchor within the page, but do not reference a hyperlink.
a:link {...}
specifically relates to hyperlinks. :visited
, :hover
and :active
are different states of these links. Note that :hover
and :active
can apply to other elements as well.
react link vs a tag and arrow function
This may be a bit late to address your issue and you may well have figured it out. But here's my take:
First:
What is the difference between using
<Link to="/page">
and<a
href="page">
- On the surface, you seem to be comparing apples and oranges here. The path in your anchor tag is a relative path while that one in the
Link
is absolute (rightly so, I don't thinkreact-router
supports relative paths yet). The problem this creates is say you are on/blah
, while clicking on yourLink
will go to/page
, clicking on the<a href='page' />
will take you to/blah/page
. This may not be an issue though since you confirmed the correctness of the url, but thought to note. - A bit deeper difference, which is just an addon to @Dennis answer (and the docs he pointed to), is when you are already in a route that matches what the
Link
points to. Say we are currently on/page
and theLink
points to/page
or even/page/:id
, this won't trigger a full page refresh while an<a />
tag naturally will. See issue on Github.
A fix I used to solve my little need around this was to pass in a state
property into link like so <Link to={{pathname: "/page", state: "desiredState"}}>Page</Link>
. Then I can check for this in the target component's (say <Page />
) componentWillReceiveProps
like so:
componentWillReceiveProps(nextProps){
if (nextProps.location.state === 'desiredState') {
// do stuffs
}
}
Second question:
the weird arrow function in react router v4 documentation... I cannot find anything on normal brackets instead of parentheses. What are they?
Arrow functions; again @Dennis and @Jaromanda X have kind of addressed it. However, I've got three bits to add:
- When you have
() => blah
without the curly braces{}
, you are implicitly returning whatever follows the=>
in this caseblah
. But when you have curly braces immediately after the arrow, then it's now your responsibility toreturn
something if you so desire. So() => blah
(which by the way is synonymous to() => (blah)
) will be more similar to() => { return blah }
and not() => { blah }
. - So what happens if you want to return an object:
{ blah: blah }
; this is what @Jaromanda X was pointing at. You will then need to do() => ({ blah: blah })
or simply() => ({ blah })
for implicit return or you could return explicitly like so() => { return { blah: blah } }
. - My third bit is to point you to MDN
Hope it helps.
What is the difference between a URL and a LINK?
URL is an acronym for "Uniform Resource Locator", and it is the
address that specifies the location of a resource on the Internet. A
typical URL must specify the protocol used to access the resource, the
name of the host computer on which it is located, and the path of the
resource:
http://www.server.com/main/folder/resource.html
The above URL indicates that the document resource.html
is located at
the web server www.server.com
where it can be found in the path/main/folder
.
An Hyperlink, or simply a Link, is:
"An element in an electronic
document that links to another place in the same document or to an
entirely different document. Typically, you click on the hyperlink to
follow the link."
Source
Difference between a and a:link
a:link
is specifically for links that have not been visited. a
applies to all <a>
elements.
Related Topics
CSS Filter Cancels Element Position
Font-Face Embedded Fonts Look Fuzzy in Windows 7 Browsers
Svg Spritesheet Targeting with CSS
Equal Height Children of Grid Items
CSS Tables for Rowspan and Colspan
Css3 Backgrounds - Multiple Background-Size Properties
How to Force a Website to Be in Landscape Mode When Viewed on a Mobile Device
How to Set an Element's Size to Fit Its Potential Content, Rather Than Its Actual Content
Is There a SASS Rule for Outputting a Descendant to the Root
Extending Bootstrap 4 and SASS
Change a Text Input's Value with CSS
How Important Is W3C Xhtml/CSS Validation When Finalizing Work
Which One Is Faster: Hex Color Codes or Color Names
What Does a CSS Selector in Square Brackets Select in HTML