Author: Gourahari Patnaik

What is this?

Browser hacks is an extensive list of browser specific CSS hacks from all over the inter-webs. CSS hacks are needed in order to solve problems caused by different browsers rendering.

How to?

Pick the hack you want. Copy it into your stylesheet. Add the style you want between the braces. Enjoy the new styles for the browser you targeted!

 Reminder!

Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS.

Firefox – Any Firefox browser hack

@-moz-document url-prefix() {
 .selector { Property: Value; }
 }

Media Query Hacks

@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 1280px) {
 .selector { Property: Value; }
 }

Google Chrome and Safari CSS hack

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .selector { Property: Value; }
 }

Note :- Safari and Google Chrome are mainly the same, but sometimes behave differently, especially in forms, and fonts rendering.

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
 .selector { Property: Value; }
 }

Opera – Opera 10 and above

@media not all and (-webkit-min-device-pixel-ratio:0) {
 .selector { Property: Value; }
 }

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
 .selector { Property: Value; }
 }

Internet Explorer / Edge IE 9 Hack

:root .selector {
 Property: Value9; color: red9;
 }

Note :-  color: red9; Hack Works on IE9

Conditional comments

<!--[if IE 9]> Internet Explorer 9 <![endif]-->
 <!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
 <!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->

IE 10 only

_:-ms-lang(x), .ie10 { property: value9; }

Internet Explorer 10+, Microsoft Edge Browser

_:-ms-lang(x), .selector { property: value; }

IE 10 and above

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
 }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
}

IE 11 (and above..) 

_:-ms-fullscreen, :root .ie11up { property:value; }

Internet Explorer 11+, Microsoft Edge Browser

/* Put this code in external stylesheet: ie11up.css */ @charset "<Any Modern Browser but MSIE 10- or FF 18- >"; _:-ms-lang(x), .selector { property:value; }

Microsoft Edge Browser 12+ (All) – @supports method

@supports (-ms-ime-align:auto) { .selector { property:value; } }

For more information on CSS browser-specific hacks please visit the following site:  http://browserhacks.com/

Quirks:

Browser hacks, boom boom! — Sean Bullock

Browser hacks – must have for all front-end developers — Mark Szymic

Front-end developers stop the IE drama and use this fine tool — iSands

This is the last blog in my tri-series on CSS3 Selectors Module. Please click on the link to read CSS3 Module Part – 1 and CSS3 Module Part 2.

Positional Selectors

:first-child – Selects every <p> element that is the first child of its parent

first-child Selector Example:

HTML

<p>This content is the first child of its parent (body).</p>
 <h4>Welcome to CSS3 Selectors Module</h4>
 <p>This content is not the first child of its parent.</p>
 <div class="targetAttr">
 <p>This content is the first child of its parent (div).</p>
 <p>This content is not the first child of its parent.</p>
 </div>

 CSS

.targetAttr {
 border-radius: 7px;
 border: 2px solid #f2f2f2;
 padding: 0px 10px;
 width:300px;
 margin:0px 0px;
 background:none;
 }
 p:first-child {background-color:yellow;}

 OUTPUT

:first-of-type – Selects every <p> element that is the first <p> element of its parent

first-of-type Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>

 CSS

p:first-of-type {background:yellow;}

 OUTPUT

:last-child – Selects every <p> element that is the last child of its parent

 last-child Selector Example:

HTML

<p>This content is the first child of its parent.</p>
 <h1>Welcome to CSS3 Selectors Module</h1>
 <p>This content is not the last child of its parent.</p>
 <div class="targetAttr">
 <p>This content is not the last child of its parent.</p>
 <p>This content is the last child of its parent (div).</p>
 </div>
 <p>This content is the last child of its parent (body).</p>

 CSS

p:last-child {background:yellow;}

 OUTPUT

:last-of-type – Selects every <p> element that is the last <p> element of its parent

last-of-type Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>
 <p>The third content.</p>
 <p>The fourth content.</p>

 CSS

p:last-of-type {background:yellow;}

 OUTPUT

:nth-child(n) – Selects every <p> element that is the second child of its parent

 a number: n is a counter and starts at 1

nth-child(n) Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>
 <p>The third content.</p>
 <p>The fourth content.</p>

 CSS

p:last-of-type {background:yellow;}

 OUTPUT

:nth-child(n) – Selects every <p> element that is the second child of its parent

a number: n is a counter and starts at 1

nth-child(n) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <div class="targetAttr">
 <p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 </div>
 <h4>N is a counter and starts at 1</h4>
 <p>Selects every &lt;p&gt; element that is the second child of its parent</p>

 CSS

p:nth-child(2) {background:yellow;}

 OUTPUT

a keyword: Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

Odd and Even Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <p>The fifth paragraph.</p>
 <p>The sixth paragraph.</p>
 <h3>Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).</h3>

 CSS

p:nth-child(odd){background:yellow;}
 p:nth-child(even){background:cyan; color:white;}

 OUTPUT

a formula: Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

nth-child(an+b) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <p>The fifth paragraph.</p>
 <p>The sixth paragraph.</p>
 <p>The seventh paragraph.</p>
 <p>The eight paragraph.</p>
 <p>The ninth paragraph.</p>

 CSS

p:nth-child(3n+3){background:Yellow;}

 OUTPUT

:nth-of-type(n) – Selects every <p> element that is the second <p> element of its parent

nth-of-type(2) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>

 CSS

p:nth-of-type(2){background:Yellow;}

 OUTPUT

:only-child – Selects every <p> element that is the only child of its parent

only-child Selector Example:

HTML

<div><p>This is a first content.</p></div>
 <div><p>This is a paragraph.</p></div>
 <div><span>This is a span.</span><p>This is a paragraph.</p></div>

 CSS

p:only-child{background:Yellow;}

 OUTPUT

:only-of-type – Selects every <p> element that is the only <p> element of its parent

only-of-type Selector Example:

HTML

<div><p>This is a paragraph 1.</p></div>
 <div><p>This is a paragraph 2.</p><p>This is a paragraph 3.</p></div>
 <div>The :only-of-type selector matches every element that is the only child of its type, of its parent.</div>

 CSS

p:only-of-type{background:Yellow;}

 OUTPUT

:empty – Selects every <p> element that has no children (including text nodes) & :root – Selects the document’s root element

Empty and Root Selector Example:

HTML

<h4>The :empty selector matches every element that has no children (including text nodes).</h4>
 <p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p></p>
 <p>The fourth paragraph.</p>

 CSS

p:empty{width:100px; height:20px; background:red;}
 :root{background:light-dark;}

 OUTPUT

In continuation of my earlier blog on ‘CSS3 Selectors Module’ in this second part, I will explain the concepts of Combinators and Attribute Selectors.

Combinators

There are four different combinators in CSS3 selectors:

• Descendant Selector(space)
• Direct Child Selector(>)
• Adjacent Sibling Selector(+)
• General Sibling Selector(~)

Descendant Selector Example:

HTML

<p>The descendant selector matches all elements that are descendants of a specified element.</p>
 <p>The following example selects all <p> elements inside <div> elements.</p>
 <div>
 <p>Paragraph 1 in the Block Element.</p>
 <p>Paragraph 2 in the Block Element.</p>
 <section><p>Paragraph 3 in the Block Element.</p></section>
 <div><p>Paragraph 4 in the Block Element.</p></div>
 </div>
 <p>Paragraph 5 Not in an inside the DIV Element.</p>
 <p>Paragraph 6 Not in an inside the DIV Element.</p>

CSS

div p {background-color: Yellow;}

Output

Direct Child Selector Example:

HTML

<p>The child selector selects all elements that are the immediate children of a specified element.</p>
 <p>The following example selects all <p> elements that are immediate children of a <div> element.</p>
 <div class="classname">
 <p>Paragraph 1 in the Block Element.</p>
 <p>Paragraph 2 in the Block Element.</p>
 <section><p>Paragraph 3 in the Block Element.</p></section>
 <div><p>Paragraph 4 in the Block Element.</p></div>
 </div>
 <p>Paragraph 5. Not in an inside the div Element.</p>
 <p>Paragraph 6. Not in an inside the div Element.</p>

CSS

div.classname {border-radius:7px; background-color:#f2f2f2; padding:20px;
 width:500px;}
 div > p {background-color:Yellow;}

 Output

Adjacent Sibling Selector Example:

HTML

<p>The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.</p>
 <p>Sibling elements must have the same parent element, and "adjacent" means "immediately following".</p>
 <p>The following example selects all &lt;p&gt; elements that are placed immediately after &lt;div&gt; elements.</p>
 <div>
 <p>Content 1 in the Block Element.</p>
 <p>Content 2 in the Block Element.</p>
 </div>
 <p>Content 3. Not in a Block Element.</p>
 <p>Content 4. Not in a Block Element.</p>

 CSS

div + p {background-color:Yellow;}

 Output

General Sibling Selector Example:

HTML

<p>The general sibling selector selects all elements that are siblings of a specified element.</p>
 <p>The following example selects all <p> elements that are siblings of <div> elements</p>
 <div>
 <p>Content 1 in the Block Element.</p>
 <p>Content 2 in the Block Element.</p>
 </div>
 <p>Content 3. Not in a Block Element.</p>
 <p>Content 4. Not in a Block Element.</p>

 CSS

div ~ p {background-color:Yellow;}

 Output

Attribute Selectors

Select elements based on attributes

From elements attribute Example:

HTML

<div>
 <form action="index.html">
 <label for="fname">First Name</label>
 <input type="text" id="fname" name="firstname">
 <label for="lname">Description</label>
 <textarea name="message" rows="10" cols="50">Swachh Bharat Challenge is an initiative to share your experiences of Swachh Bharat Abhiyan and invite other people to accept the challenge and join hands in the Abhiyan. You can open up the challenge to a maximum of nine persons and similarly, each of these nine persons can also challenge nine more…this way the chain of activities would keep growing.</textarea>
 <label for="country">State</label>
 <select id="country" name="country">
 <option value="bangalore">Bangalore</option>
 <option value="delhi">Delhi</option>
 </select>
 <input type="button" value="Button">
 <input type="reset" value="Reset">
 <input type="submit" value="Submit">
 </form>
 </div>

CSS

div{border-radius:7px; background-color:#f2f2f2; padding: 20px; width:500px;}
 input[type=text], select, textarea {width:100%; padding:10px 10px; margin:8px 0;
 display:inline-block; border:1px solid #ccc; border-radius:5px;}
 input[type=button], input[type=submit], input[type=reset] {
 background-color:#4CAF50; border:none; color:white; border:none;
 padding:12px 32px; text-decoration:none; margin:4px 7px;
 cursor:pointer; border-radius:5px; width:30%;}

Output

[attribute=value] – Selects all elements with target=”_blank”

Attribute=value Example

HTML

<div class="targetAttr">
 <p>The link with target="_blank" gets a yellow background:</p>
 <a href="https://www.google.co.in/" target="_blank">Google.co.in</a>
 <a href="https://in.yahoo.com/">Yahoo.com</a>
 <a href="http://www.wikipedia.org" target="_top">Wikipedia.org</a>
 </div>

CSS

.targetAttr{border-radius:7px; border:2px solid #f2f2f2; padding:20px;
 width:600px; margin:50px 0px; background-color: #f2f2f2; font-size:20px;}
 a[target=_blank] {background-color: yellow;}

Output

[attribute~=value] – Selects all elements with a title attribute containing the word “flower”

attribute~=value Example :

HTML

<div class="targetAttr">
 <p>The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.</p>
 <p>The image with the title attribute containing the word "flower" gets a yellow border.</p>
 <img src="1.jpg" title="klematis flower" width="160" height="160" alt="" />
 <img src="2.jpg" title="flowers" width="160" height="160" alt="" />
 <img src="3.jpg" title="landscape" width="160" height="160" alt="" />
 </div>

CSS

[title~=flower] {border: 5px solid yellow;}

Output

[attribute^=value] – Selects every <a> element whose href attribute value begins with “top”

attribute^=value Example:

HTML

<div class="targetAttr">
 <p>The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.</p>
 <p>The following example selects all elements with a class attribute value that begins with "top":</p>
 <h1 class="top-header">Welcome to CSS3 Selectors</h1>
 <p class="top-text">Hi Guys</p>
 <p class="contenttop">Good afternoon</p>
 </div>

 CSS

[class^="top"] {background: yellow;}

 Output

[attribute$=value] – Selects every <a> element whose href attribute value ends with “test”

attribute$=value Example:

HTML

<div class="targetAttr">
 <p>The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.</p>
 <p>The following example selects all elements with a class attribute value that ends with "test":</p>
 <p class="first_test">The first div element.</p>
 <p class="second">The second div element.</p>
 <p class="my-test">The third div element.</p>
 <p class="mytest">This is some text in a paragraph.</p>
 </div>

 CSS

[class$="test"]{background: yellow;}

 Output

:enabled – Selects every enabled <input> element

:disabled – Selects every disabled <input> element

Enabled and Disabled Example:

HTML

<div>
 First name: <input type="text" value="Enabled" enabled="enabled"><br>
 Last name: <input type="text" value="Disabled" disabled="disabled">
 </div>

 CSS

input[type=text]:enabled {background:Yellow;}
 input[type=text]:disabled {background: grey;}

 Output

Don’t miss the next blog in the series, `CSS3 Selectors – Module – Part 3′.

INTRODUCTION

A CSS selector is the part of a CSS rule-set that actually selects the content we want to style.

CSS Syntax :

CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.

W3C Proposed Recommendation: http://www.w3.org/TR/css3-selectors/

BASIC SELECTORS:

• H1 { } – The Element/Tag Selectors
• P { } – The Element/Tag Selectors
• H1,P { } – The Grouping Selectors
• .class-name { } – The Class Selectors
• #unique-id { } – The ID Selectors
• * { } – The Universal Selectors

BASIC EXAMPLE:

HTML:

<h1>Heading Text</h1>
 <p>This is paragraph text.</p>
 <span class="class-name">This is CLASS Selector.</span>
 <div id="unique-id">This is ID Selector.</div>

 CSS:

h1{color:#F00}
 p{color:#00F}
 h1,p{border:1px solid red;}
 .class-name{background:red; color:white;}
 #unique-id{text-decoration:underline;}

OUTPUT:

PSEUDO-CLASS SELECTOR:

• a:link { }
• a:visited { }
• a:hover { }
• a:active { }

 PSEUDO-CLASS EXAMPLE:

HTML:

<p><b>
 <a href="https://www.google.co.in/" target="_blank">This is a link</a>
 </b></p>
 <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
 <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

 CSS:

/* unvisited link */

a:link {color: red;}

/* visited link */

a:visited {color: green;}

/* mouse over link */

a:hover {color: hotpink;}

/* selected link */

a:active {color: blue;}

OUTPUT:

NEGATION PSEUDO-CLASS SELECTOR:

:not(selector) – selects every element that is not a <p> element

not(selector)

EXAMPLE:

HTML:

<h4>This is a heading</h4>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
 <div>This is some text in a div element.</div>
 <a href="https://www.google.co.in/" target="_blank">Link to Google</a>

 CSS:

p{color: black;}
 :not(p){color: red;}

 OUTPUT:

PSEUDO ELEMENTS:

::first-letter – Selects the first letter of every <p> element

Note : single-colon CSS2 syntax (:first-letter) & double-colon CSS3

syntax (::first-letter)

FIRST-LETTER EXAMPLE:

HTML:

<h4>Pseudo-Elements</h4>
 <span>My name is Gourahari.</span>
 <p>I live in Bangalore.</p>
 <p>Welcome to Trigent Software.</p>
 <p>My best friend is Mickey.</p>
 <p>Note: The ::first-letter selector can only be used with block-level elements.</p>
 <p><b>Note:</b> For this selector to work in IE 5.5-8, you must specify the old, single-colon CSS2 syntax (:first-letter instead of ::first-letter).</p>

 CSS:

p::first-letter{font-size: 200%; color: purple;}

OUTPUT:

::first-line – Selects the first line of every <p> element

FIRST LINE EXAMPLE:

HTML:

<h4>Swachh Bharat Challenges</h4>
 <p>Swachh Bharat Challenge is an initiative to share your experiences of Swachh Bharat Abhiyan and invite other people to accept the challenge and join hands in the Abhiyan. You can open up the challenge to a maximum of nine persons and similarly, each of these nine persons can also challenge nine more…this way the chain of activities would keep growing.</p>
 <p>Note: The ::first-line selector can only be used with block-level elements.</p>

 CSS:

p::first-line{background-color: yellow;}

 OUTPUT:

::before – Insert something before the content of each <p> element

 BEFORE EXAMPLE:

HTML:

<p>My name is Donald</p>
 <p>I live in Bangalore</p>
 <p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>

 CSS:

p::before{content: "Read this -"; background-color:Yellow; color:red;
 font-weight: bold;}

 OUTPUT:

::after – Insert something after the content of each <p> element

AFTER EXAMPLE:

HTML:

<p>My name is Donald</p>
 <p>I live in Bangalore</p>
 <p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after)</p>

 CSS:

p::after{content: " - Remember this";background-color:Yellow;
 color:red; font-weight:bold;}

 OUTPUT: