Re: [css-d] a:hover state in different browsers

[Philippe Wittenbergh]

> On Aug 13, 2016, at 10:19 AM, Tom Livingston  wrote:
> 
> The differences in font rendering between browsers, even with the same
> font specified, wouldn't position things differently?

Sure, but that has nothing to do with rem or other font(-size) related units 
(ems, ch, etc).

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] a:hover state in different browsers

[Tom Livingston]

On Fri, Aug 12, 2016 at 9:16 PM, Philippe Wittenbergh  wrote:
>
>> On Aug 13, 2016, at 9:05 AM, Tom Livingston  wrote:
>>
>> I personally wouldn't use rem's for all of the units involved with
>> that structure. rem is based on the root element's font size, making
>> it - I assume - dependent on how each browser renders a font, which is
>> where your slight differences come from.
>
> Rem unit is perfectly fine in this case, as it computed value is based on the 
> font-size (independently of which font-family is used). The cross-browser 
> default is 16px for any given font, last I checked.
>
> OTOH, the used font-family may affect where elements end up on the page, at 
> paint-time. A small font like Times will use less vertical pixel space then a 
> large font like Verdana.
>
> Philippe


The differences in font rendering between browsers, even with the same
font specified, wouldn't position things differently?



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] a:hover state in different browsers

[Philippe Wittenbergh]

> On Aug 13, 2016, at 9:05 AM, Tom Livingston  wrote:
> 
> I personally wouldn't use rem's for all of the units involved with
> that structure. rem is based on the root element's font size, making
> it - I assume - dependent on how each browser renders a font, which is
> where your slight differences come from.

Rem unit is perfectly fine in this case, as it computed value is based on the 
font-size (independently of which font-family is used). The cross-browser 
default is 16px for any given font, last I checked.

OTOH, the used font-family may affect where elements end up on the page, at 
paint-time. A small font like Times will use less vertical pixel space then a 
large font like Verdana.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] a:hover state in different browsers

[Philippe Wittenbergh]

> On Aug 13, 2016, at 8:52 AM, John J  wrote:
> 
> At the link below, I'm having trouble getting the hover state to look the
> same across browsers. On hover, there  should be a red line under the
> hovered-over item as wide as the thin gray line below it, as thick as that
> line is.
> 
> The thickness seems to match, but the positioning is off, browser to
> browser.

As Tom notes, you specify two different values for border-width. That matters 
as this affects where the border is positioned (as the computed value is a 
non-integer).

Browsers ‘pixel-snap’ borders to the nearest pixel, to make sure the border 
looks crisp.

> Safari and Firefox show the hover-state line a bit too low; Chrome Canary
> shows it exactly where it needs to be.

It could be that Chrome takes a different decision where to snap the border 
then Safari / Firefox.

There are multiple things that will affect this.
For one, you don’t specify a `line-height`, the default value will be normal. 
Depending on the font-family in use (and the availability of that font on any 
platform) this can be quite different (the difference at our font-size can 1 or 
2 pixels). Second, again, that value almost certainly competes to a 
non-integer, that will contribute to the overall height of the box(es) and 
affect the position of the border.

Other factors that may affect this: you specify height for multiple boxes. Does 
this compute to an integer ? Ditto for your use of padding-top.

> Am I working against myself, trying to do something that's too tricky by
> trying to get a hover element to line up with, basically the bottom of the
> header which is 3 parents up from the nav?
> 
> Thank you for any clues!

There is nothing inherently wrong with what you are attempting, but you are up 
to the limits of display technology. If you compare carefully, you’ll probably 
notice small differences between a retina and a non-retina display.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] a:hover state in different browsers

[Tom Livingston]

On Fri, Aug 12, 2016 at 7:52 PM, John J  wrote:
> At the link below, I'm having trouble getting the hover state to look the
> same across browsers. On hover, there  should be a red line under the
> hovered-over item as wide as the thin gray line below it, as thick as that
> line is.
>
> The thickness seems to match, but the positioning is off, browser to
> browser.
>
> Safari and Firefox show the hover-state line a bit too low; Chrome Canary
> shows it exactly where it needs to be.
>
> Am I working against myself, trying to do something that's too tricky by
> trying to get a hover element to line up with, basically the bottom of the
> header which is 3 parents up from the nav?
>
> Thank you for any clues!
>
> John
>
>
> http://john-a-johnson.com/contact.php


I personally wouldn't use rem's for all of the units involved with
that structure. rem is based on the root element's font size, making
it - I assume - dependent on how each browser renders a font, which is
where your slight differences come from. Also, the border widths you
have set are different.



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] a:hover state in different browsers

[John J]

At the link below, I'm having trouble getting the hover state to look the
same across browsers. On hover, there  should be a red line under the
hovered-over item as wide as the thin gray line below it, as thick as that
line is.

The thickness seems to match, but the positioning is off, browser to
browser.

Safari and Firefox show the hover-state line a bit too low; Chrome Canary
shows it exactly where it needs to be.

Am I working against myself, trying to do something that's too tricky by
trying to get a hover element to line up with, basically the bottom of the
header which is 3 parents up from the nav?

Thank you for any clues!

John


http://john-a-johnson.com/contact.php
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

This might be worth taking a look at.

http://jsfiddle.net/SchizoDuckie/fzZ9d/

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 2:56 PM, Karl DeSaulniers  wrote:
> 
> Would this be what you're seeking?
> I think this is the closest you can come if not.
> 
> h1:target
> {
>background: green;
> }
> h1:not(:target)
> {
>background: red;
> }
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
>> On Aug 12, 2016, at 8:03 AM, Andre Osku Schmidt 
>>  wrote:
>> 
>> Sorry,
>> 
>> my first mail had an syntax error and was not clear enough, ill try again.
>> 
>> here is an example of :target
>> http://osku.de/post/css-target-source-example1.html
>> 
>> there we have a single css definition:
>> :target { background: green; }
>> 
>> so when we click a link (with eg. href="#foo") in the unordered list, you
>> can see the "active" target (with eg. id="foo") change and leave their
>> background to green. and all this with one css rule, pretty cool!
>> 
>> now, i'm trying to findout if there is a css pseudo-class that would be the
>> source of :target.
>> 
>> lets pretend the pseudo-class im looking for is called :source and i would
>> have css like this:
>> :source { background: red; }
>> 
>> here is an example what it would do ("polyfilled" with javascript but
>> apparently we cant just create our own pseudo-classes, so this example uses
>> .source instead of :source):
>> http://osku.de/post/css-target-source-example2.html
>> 
>> so when you click a link (with eg. href="#foo") in the unordered list, you
>> can see the "active" source (with eg. href="#foo") change and leave their
>> background to red.
>> 
>> I hope its more clear now, and still wonder if:
>> 
>> - Is there really no such pseudo-class?
>> - Would this be technically impossible?
>> - Has this been proposed before?
>> - Any tips for proposing one? ;P
>> 
>> Cheers
>> Andre Schmidt
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

Would this be what you're seeking?
I think this is the closest you can come if not.

h1:target
{
background: green;
}
h1:not(:target)
{
background: red;
}

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 8:03 AM, Andre Osku Schmidt 
>  wrote:
> 
> Sorry,
> 
> my first mail had an syntax error and was not clear enough, ill try again.
> 
> here is an example of :target
> http://osku.de/post/css-target-source-example1.html
> 
> there we have a single css definition:
> :target { background: green; }
> 
> so when we click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" target (with eg. id="foo") change and leave their
> background to green. and all this with one css rule, pretty cool!
> 
> now, i'm trying to findout if there is a css pseudo-class that would be the
> source of :target.
> 
> lets pretend the pseudo-class im looking for is called :source and i would
> have css like this:
> :source { background: red; }
> 
> here is an example what it would do ("polyfilled" with javascript but
> apparently we cant just create our own pseudo-classes, so this example uses
> .source instead of :source):
> http://osku.de/post/css-target-source-example2.html
> 
> so when you click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" source (with eg. href="#foo") change and leave their
> background to red.
> 
> I hope its more clear now, and still wonder if:
> 
> - Is there really no such pseudo-class?
> - Would this be technically impossible?
> - Has this been proposed before?
> - Any tips for proposing one? ;P
> 
> Cheers
> Andre Schmidt
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Philippe Wittenbergh]

> On Aug 12, 2016, at 10:03 PM, Andre Osku Schmidt 
>  wrote:
> 
> here is an example what it would do ("polyfilled" with javascript but
> apparently we cant just create our own pseudo-classes, so this example uses
> .source instead of :source):
> http://osku.de/post/css-target-source-example2.html

Fails in Safari 9.1 though: 'SyntaxError: Unexpected identifier 'clsn''
Works as expected in Firefox. Thanks for clarifying.

> so when you click a link (with eg. href="#foo") in the unordered list, you
> can see the "active" source (with eg. href="#foo") change and leave their
> background to red.
> 
> I hope its more clear now, and still wonder if:
> 
> - Is there really no such pseudo-class?

No not really - it is a variant on the :visited state. but more temporary.

> - Would this be technically impossible?
> - Has this been proposed before?
I don’t think so.

> - Any tips for proposing one? ;P

The mailing list for the CSS WG is your best bet.
https://lists.w3.org/Archives/Public/www-style/


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Philippe Wittenbergh]

> On Aug 12, 2016, at 9:42 PM, Chris Rockwell  wrote:
> 
> Consider a use-case in which your page has a long list of
> anchors (imagine a sticky sidebar which scrolls with the user).  The goal
> (in my contrived scenario) would be to gray out the anchor which links to
> the targeted element.
> 
> Instead of styling each anchor in the sidebar with it's own rule e.g.
> a[href="target1"] {}
> a[href="target2"] {}
> 
> I think the question is, can you do something like this:
> a[href=:target] { color: lightgray; }

That would indeed by interesting, a bit limited perhaps. Basically styling the 
originating link – it is bit similar to the :visited pseudo-class, though. I 
don’t remember having seen proposals covering this - and I don’t see anything 
like that Selectors4 [*].

Karl replied

> On Aug 12, 2016, at 9:50 PM, Karl DeSaulniers  wrote:
> 
> Yes, looks like it..
> 
> https://developer.mozilla.org/en-US/docs/Web/CSS/:target

No that is not it at all. The :target pseudo class styles the target of the 
link, IOW, the destination. What the OP wants is styling the originating link.


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Andre "Osku" Schmidt]

Sorry,

my first mail had an syntax error and was not clear enough, ill try again.

here is an example of :target
http://osku.de/post/css-target-source-example1.html

there we have a single css definition:
:target { background: green; }

so when we click a link (with eg. href="#foo") in the unordered list, you
can see the "active" target (with eg. id="foo") change and leave their
background to green. and all this with one css rule, pretty cool!

now, i'm trying to findout if there is a css pseudo-class that would be the
source of :target.

lets pretend the pseudo-class im looking for is called :source and i would
have css like this:
:source { background: red; }

here is an example what it would do ("polyfilled" with javascript but
apparently we cant just create our own pseudo-classes, so this example uses
.source instead of :source):
http://osku.de/post/css-target-source-example2.html

so when you click a link (with eg. href="#foo") in the unordered list, you
can see the "active" source (with eg. href="#foo") change and leave their
background to red.

I hope its more clear now, and still wonder if:

- Is there really no such pseudo-class?
- Would this be technically impossible?
- Has this been proposed before?
- Any tips for proposing one? ;P

Cheers
Andre Schmidt
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

Yes, looks like it..

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Aug 12, 2016, at 7:42 AM, Chris Rockwell  wrote:
> 
> I might muddy the waters here, but I'll try to explain how I interpreted
> the goal.  Consider a use-case in which your page has a long list of
> anchors (imagine a sticky sidebar which scrolls with the user).  The goal
> (in my contrived scenario) would be to gray out the anchor which links to
> the targeted element.
> 
> Instead of styling each anchor in the sidebar with it's own rule e.g.
> a[href="target1"] {}
> a[href="target2"] {}
> 
> I think the question is, can you do something like this:
> a[href=:target] { color: lightgray; }
> 
> Then you only need 1 rule.
> 
> My apologies to OP if I am only creating noise :)!
> 
> 
> 
> 
> On Fri, Aug 12, 2016 at 8:33 AM Tom Livingston  wrote:
> 
>> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers 
>> wrote:
>>> Hi Andre,
>>> Why would you target the element for its href if you already have an id?
>>> Not sure I am understanding that part.
>>> 
>>> For checking the href, like Tom said.
>>> 
>>> a[href*='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> or if you know #foobar will always be at the end of the url you can use
>> the $
>>> 
>>> a[href$='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> or if you wanted to color per website in the url
>>> 
>>> a[href^='http://example.com'] {
>>>color: red;
>>> }
>>> 
>>> website url and hash (for those long blog urls =)
>>> 
>>> a[href^='http://example.com'][href$='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> Then there is checking both id and href
>>> 
>>> a#foobar[href*='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> if it's a link that could possibly be more than one on a page, then I
>> would use classes not an id.
>>> 
>>> a.foobar[href*='#foobar'] {
>>>color: red;
>>> }
>>> 
>>> HTH,
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>> 
>> 
>> If I am not mistaken, and for clarity, you would not include the '#'
>> in the value of all the above examples.
>> 
>> 
>> 
>> --
>> 
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> 
>> 
>> #663399
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Tom Livingston]

Right, sorry. Was thinking about it wrong.


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Chris Rockwell]

I might muddy the waters here, but I'll try to explain how I interpreted
the goal.  Consider a use-case in which your page has a long list of
anchors (imagine a sticky sidebar which scrolls with the user).  The goal
(in my contrived scenario) would be to gray out the anchor which links to
the targeted element.

Instead of styling each anchor in the sidebar with it's own rule e.g.
a[href="target1"] {}
a[href="target2"] {}

I think the question is, can you do something like this:
a[href=:target] { color: lightgray; }

Then you only need 1 rule.

My apologies to OP if I am only creating noise :)!




On Fri, Aug 12, 2016 at 8:33 AM Tom Livingston  wrote:

> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers 
> wrote:
> > Hi Andre,
> > Why would you target the element for its href if you already have an id?
> > Not sure I am understanding that part.
> >
> > For checking the href, like Tom said.
> >
> > a[href*='#foobar'] {
> > color: red;
> > }
> >
> > or if you know #foobar will always be at the end of the url you can use
> the $
> >
> > a[href$='#foobar'] {
> > color: red;
> > }
> >
> > or if you wanted to color per website in the url
> >
> > a[href^='http://example.com'] {
> > color: red;
> > }
> >
> > website url and hash (for those long blog urls =)
> >
> > a[href^='http://example.com'][href$='#foobar'] {
> > color: red;
> > }
> >
> > Then there is checking both id and href
> >
> > a#foobar[href*='#foobar'] {
> > color: red;
> > }
> >
> > if it's a link that could possibly be more than one on a page, then I
> would use classes not an id.
> >
> > a.foobar[href*='#foobar'] {
> > color: red;
> > }
> >
> > HTH,
> >
> > Best,
> >
> > Karl DeSaulniers
>
>
> If I am not mistaken, and for clarity, you would not include the '#'
> in the value of all the above examples.
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

> On Aug 12, 2016, at 7:40 AM, Karl DeSaulniers  wrote:
> 
>> On Aug 12, 2016, at 7:32 AM, Tom Livingston  wrote:
>> 
>> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  
>> wrote:
>>> Hi Andre,
>>> Why would you target the element for its href if you already have an id?
>>> Not sure I am understanding that part.
>>> 
>>> For checking the href, like Tom said.
>>> 
>>> a[href*='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> or if you know #foobar will always be at the end of the url you can use the 
>>> $
>>> 
>>> a[href$='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> or if you wanted to color per website in the url
>>> 
>>> a[href^='http://example.com'] {
>>>   color: red;
>>> }
>>> 
>>> website url and hash (for those long blog urls =)
>>> 
>>> a[href^='http://example.com'][href$='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> Then there is checking both id and href
>>> 
>>> a#foobar[href*='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> if it's a link that could possibly be more than one on a page, then I would 
>>> use classes not an id.
>>> 
>>> a.foobar[href*='#foobar'] {
>>>   color: red;
>>> }
>>> 
>>> HTH,
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>> 
>> 
>> If I am not mistaken, and for clarity, you would not include the '#'
>> in the value of all the above examples.
>> 
>> 
>> 
>> -- 
>> 
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> 
>> 
> 
> 
> We are checking for a hash here, so yeah I would include.
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 

But for clarity, there is no gun being held to any heads. :)

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Karl DeSaulniers]

> On Aug 12, 2016, at 7:32 AM, Tom Livingston  wrote:
> 
> On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  
> wrote:
>> Hi Andre,
>> Why would you target the element for its href if you already have an id?
>> Not sure I am understanding that part.
>> 
>> For checking the href, like Tom said.
>> 
>> a[href*='#foobar'] {
>>color: red;
>> }
>> 
>> or if you know #foobar will always be at the end of the url you can use the $
>> 
>> a[href$='#foobar'] {
>>color: red;
>> }
>> 
>> or if you wanted to color per website in the url
>> 
>> a[href^='http://example.com'] {
>>color: red;
>> }
>> 
>> website url and hash (for those long blog urls =)
>> 
>> a[href^='http://example.com'][href$='#foobar'] {
>>color: red;
>> }
>> 
>> Then there is checking both id and href
>> 
>> a#foobar[href*='#foobar'] {
>>color: red;
>> }
>> 
>> if it's a link that could possibly be more than one on a page, then I would 
>> use classes not an id.
>> 
>> a.foobar[href*='#foobar'] {
>>color: red;
>> }
>> 
>> HTH,
>> 
>> Best,
>> 
>> Karl DeSaulniers
> 
> 
> If I am not mistaken, and for clarity, you would not include the '#'
> in the value of all the above examples.
> 
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 


We are checking for a hash here, so yeah I would include.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS pseudo-class for source of :target

[Tom Livingston]

On Thu, Aug 11, 2016 at 6:39 PM, Karl DeSaulniers  wrote:
> Hi Andre,
> Why would you target the element for its href if you already have an id?
> Not sure I am understanding that part.
>
> For checking the href, like Tom said.
>
> a[href*='#foobar'] {
> color: red;
> }
>
> or if you know #foobar will always be at the end of the url you can use the $
>
> a[href$='#foobar'] {
> color: red;
> }
>
> or if you wanted to color per website in the url
>
> a[href^='http://example.com'] {
> color: red;
> }
>
> website url and hash (for those long blog urls =)
>
> a[href^='http://example.com'][href$='#foobar'] {
> color: red;
> }
>
> Then there is checking both id and href
>
> a#foobar[href*='#foobar'] {
> color: red;
> }
>
> if it's a link that could possibly be more than one on a page, then I would 
> use classes not an id.
>
> a.foobar[href*='#foobar'] {
> color: red;
> }
>
> HTH,
>
> Best,
>
> Karl DeSaulniers


If I am not mistaken, and for clarity, you would not include the '#'
in the value of all the above examples.



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/