Expect everything to change...

1. X Y

li a {
  text-decoration: none;
}

2. X:visited and X:link

a:link { color: red; }
a:visted { color: purple; }

3. X + Y

ul + p {
   color: red;
}

4. X > Y    (direct children)

div#container > ul {
  border: 1px solid black;
}

5. X[title]

a[title] {
   color: green;
}

6. X[href="foo"]

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

7. X[href*="nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

8. X[href^="http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

9. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

10. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

11. X:after

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
 }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

12. X:hover

div:hover {
  background: #e3e3e3;
}

13. X:not(selector)

div:not(#container) {
   color: blue;
}

14. X::pseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

15. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

16. X:first-child

ul li:first-child {
   border-top: none;
}

17. X:first-of-type

A Test

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>

   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>
</div>

Solution 1

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

Solution 2

p + ul li:last-child {
   font-weight: bold;
}

Solution 3

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

function MyScript(){}
(function()
{
  var THIS = this;
  function defined(x)
  {
    return typeof x != 'undefined';
  }
  this.ready = false;
  this.init = function(
  {
    this.ready = true;
  };
  this.doSomething = function()
  {
  };   
  var options = {
      x : 123,
      y : 'abc'
      };
  this.define = function(key, value)
  {
    if(defined(options[key]))
    {
      options[key] = value;
    }
  };
}).apply(MyScript);

(function()
{
  ...
})();

function doSomething()
{
  ...
}

doSomething();

The Beauty Within

var THIS = this; 

function defined(x)
{
  return typeof x != 'undefined';
}

this.ready = false;
this.init = function()
{
  this.ready = true;
};
this.doSomething = function()
{
};

var options = {
  x : 123,
  y : 'abc'
  };
this.define = function(key, value)
{
  if(defined(options[key]))
  {
    options[key] = value;
  }
};

THIS or That?

function MyScript(){}
(function()
{
   var THIS = this;  
   function defined(x)
   {
      alert(this);      //points to defined()
      alert(THIS);      //points to MyScript()
   }
}).apply(MyScript);

Wrapped Up!

1. If the selectors are the same then the latest one will always take precedence.
2. The more specific a selector, the more preference it will be given when it comes to conflicting styles.
3. The embedded style sheet has a greater specificity than other rules.

Specificity hierarchy

1. Inline styles (Presence of style in document).
   An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
2. IDs (# of ID selectors)
   ID is an identifier for your page elements, such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors).
   This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors).
   Including for instance :before and :after.

• p has a specificity of 1 (1 HTML selector)
• div p has a specificity of 2 (2 HTML selectors; 1+1)
• .tree has a specificity of 10 (1 class selector)
• div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
• #baobab has a specificity of 100 (1 id selector)
• body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

What is what

p { padding: 10px; }

p.section { padding: 10px; } 

#section { padding: 10px; }

p span { font-style: italic; }

p[title] { font-weight: bold; } 

a:visited {
text-decoration: underline; 
}

p:first-line {
font-variant: small-caps; 
}
a:link:after { content: " (" attr(href) ")"; }

1) Most common way, unfortunately, global function calls

makeArray('one', 'two');  
   // => [ window, 'one', 'two' ]  

2) Method call

//creating the object
var arrayMaker = {
 someProperty: 'some value here',
 make: makeArray
};

//invoke the make() method
arrayMaker.make('one', 'two');
// => [ arrayMaker, 'one', 'two' ]
// alternative syntax, using square brackets
arrayMaker['make']('one', 'two');
// => [ arrayMaker, 'one', 'two' ]

var arrayMaker = {
 someProperty: 'some value here',
 make: function (arg1, arg2) {
  return [ this, arg1, arg2 ];
 }
};

//using jQuery
$('#btn1').click( function() {
 alert( this.id ); // jQuery ensures 'this' will be the button
});

3) + 4) Two more: apply() and call()

var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };
makeArray.apply( gasGuzzler, [ 'one', 'two' ] );
// => [ gasGuzzler, 'one' , 'two' ]
makeArray.call( gasGuzzler,  'one', 'two' );
// => [ gasGuzzler, 'one' , 'two' ]

5) Constructors

//declaring the constructor
function ArrayMaker(arg1, arg2) {
 this.someProperty = 'whatever';
 this.theArray = [ this, arg1, arg2 ];
}
// declaring instance methods
ArrayMaker.prototype = {
 someMethod: function () {
  alert( 'someMethod called');
 },
 getArray: function () {
  return this.theArray;
 }
};

var am = new ArrayMaker( 'one', 'two' );
var other = new ArrayMaker( 'first', 'second' );

am.getArray();
// => [ am, 'one' , 'two' ]

It's a wrap