I know they are built on similar webkits so they should render mostly the same, but in the rare case where one needs to specifically target the Safari browser (for windows) but not Chrome OR vice versa, what CSS selectors can be applied.

I found this information but I don't really understand it without seeing some practical examples. Perhaps some CSS gurus can elaborate? From http://acidmartin.wordpress.com/2008...me-and-safari/

/* Google Chrome hack */

body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

/* Safari hack */

body:first-of-type .elementOrClassName
{
/* properties go here */
}

I never have had to target those individually, but basically that article points to using a method where ONLY safari and google "understand" that CSS technique.

For instance, if you used _background: #fff; (note the underscore) only IE6 and below would even render anything on that line. Other browsers would simply ignore it and move on.

Another case is where !important is used after some CSS like
margin-top: 3.5em !important;
In this case, all browsers other than IE7(and below I think) will implement this style over ANY other style within the CSS.

These are just ways to avoid always having a "conditional" separate CSS file.

Here are some others: http://www.evolt.org/article/Ten_CSS...know/17/60369/

Hope this helps you.

Using hacks is always risky because ultimately browser technology will change and that hack that only works in Chrome today, will blow up in your face in the future

As for the !important thing - it's a FILTER, and IMO, a hack employed when people don't understand enough about CSS to figure out what exactly is happening with their cascade and specificity

@LadynRed
I second your opinion. I have never had to use ANY of those hacks, but I thought the question was about why only certain things are seen by certain browsers.

The farthest I have ever gone with a conditional stylesheet is to nudge a few things here and there in IE6 so I am always quite confused about the number of conditional stylesheets some people need.

@TWD
When I work on design I keep IE6, IE7, firefox and safari open for frequent checks. Making changes as you go may help you from taking the shortcut in the end and using all of these hacks.

The obvious cause of differences is a lack of compliance with a single standard on how things are rendered by the browser - then comes programming bugs in the browsers themselves.

I generally use 2 conditional stylesheets - one for IE6 and below, and another for IE7 - and I rarely have anything in the IE7 sheet.

It is better to write standard supported code and forego the 'bleeding edge' than to use a batch of hacks - IMO.

Thanks. That's all good stuff.

But back to my original question, can somebody show me how to target
Chrome and NOT Safari or vice versa?

I'm asking for a coded example.

My question is - why do you need to ? If you're using valid, supported CSS, then why would a hack be necessary to differentiate ?? Are you fighting a specific bug or something ?

Its more hypothetical curiosity.

You never know. The day might arrive when I need to target either browser
and I'm just interested in the approach to doing that.

In my original post there is some code I didnt understand.
Do you know how this is applied?

*Chrome*
body:nth-of-type(1) .elementOrClassName

*Safari*
body:first-of-type .elementOrClassName