What Does A[Href^="..."] Do in Css

What does a[href^= ... ] do in CSS?

a[href^="http:"]

Selects an <a> element whose href attribute value begins with http:.

For example:

p[title^="para"] {background: green;}

Will match the following:

<p title="paragraph"> This paragraph should have a green background. </p>

Using CSS classes to Format a href:tel link

You can use Attribute Selectors to match the begining of the href value to "tel", using the prefix comparision ^=:

a[href^="tel:"] {
}

This would match only the a tags which href property starts with the "tel" value:

Example:

a[href^="tel:"] {  color: red;}

<a href="http://www.google.com">Test 1</a><br /><a href="tel:+123456">Test 2</a>

what does link href= # do?

Probably some stylesheet that is to be loaded later on.

CSS attribute selector does not work a href

Use the $ after your href. This will make the attribute value to match the end of the string.

a[href$='.pdf'] { /*css*/ }

JSFiddle: http://jsfiddle.net/UG9ud/

E[foo]        an E element with a "foo" attribute (CSS 2)
E[foo="bar"]  an E element whose "foo" attribute value is exactly equal to "bar" (CSS 2)
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" (CSS 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" (CSS 3)
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" (CSS 3)
E[foo*="bar"] an E element whose "foo" attribute value contains the substring "bar" (CSS 3)
E[foo|="en"]  an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en" (CSS 2)

source: http://www.w3.org/TR/selectors/

a href link for entire div in HTML/CSS

UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.

You'll need to choose between the following scenarios:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

which is semantically incorrect, but it will work.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

which is semantically correct but it involves using JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

which is semantically correct and works as expected but is not a div any more.

Is it possible to Display None using href link?

You can use the following solution, using a attribute selector:

a[href="example.html"] {  display:none;}

<a href="example.html">Any text or Image<a><a href="https://stackoverflow.com/">StackOverflow<a>

CSS Selector: Anchor text of href contains

All links have a unique parameter called tbm: its value is isch for images, so I'd go with

a[href*="tbm=isch"]

What Does A[Href^="..."] Do in Css