Friday, 14 September 2012

The 30 CSS Selectors

For a list of CSS selectors browser support, please see here:
http://quirksmode.org/css/contents.html

The 30 CSS selectors:
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/


1) *

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2) #X

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3) .X

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4) X Y

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

5) X

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

6) X:visited and X:link


  1. a:link { colorred; }  
  2. a:visted { colorpurple; }   

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7) X + Y


  1. ul + p {  
  2.    colorred;  
  3. }   
Selecting the first sibling element Y immediately preceded by X.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8) X > Y

This selector selects the direct children only.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9) X ~ Y

Similar to X Y.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10) X[attr]

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11) X[attr="val"]

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12) X[attr*="val"]


  1. a[href*="tuts"] {  
  2.   color#1f6053/* nettuts green */  
  3. }  
Selecting anchor(s) with the attribute "class" contains the value "bar".

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13) X[attr^="val"]


  1. a[href^="http"] {  
  2.    backgroundurl(path/to/external/icon.png) no-repeat;  
  3.    padding-left10px;  
  4. }  
Selects all anchor tags with "href" that begins with "http". This does not account for url with "https"

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14) X[attr$="val"]


  1. a[href$=".jpg"] {  
  2.    colorred;  
Selects all "href" that are link to a jpg file.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15) X[data-*="val"]


  1. a[data-filetype="image"] {  
  2.    colorred;  
  3. }  

  1. <a href="path/to/image.jpg" data-filetype="image"> Image Link </a>  
Since an image file type can end with jpg, png, gif...etc, so rather than selecting different file types, we can use the attribute "data-filetype='image'" to select all image files.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16) X[attr~="val"]


  1. <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>  

  1. /* Target data-info attr that contains the value "external" */  
  2. a[data-info~="external"] {  
  3.    colorred;  
  4. }  
  5.   
  6. /* And which contain the value "image" */  
  7. a[data-info~="image"] {  
  8.   border1px solid black;  
  9. }  
Targets anchors with "data-info" with space separated list.

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17) X:checked


  1. input[type=radio]:checked {  
  2.    border1px solid black;  
  3. }  

Compatibility
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18) X:after

Compatibility
  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19) X:hover

Compatibility
  • IE6+ (In IE6, :hover must be applied to an anchor element)
  • Firefox
  • Chrome
  • Safari
  • Opera

20) X:not(selector)

Compatibility
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21) X::pseudoElement


  1. p::first-line {  
  2.    font-weightbold;  
  3.    font-size: 1.2em;  
  4. }   
Selects the first line of a paragraph

  1. p::first-letter {  
  2.    floatleft;  
  3.    font-size: 2em;  
  4.    font-weightbold;  
  5.    font-familycursive;  
  6.    padding-right2px;  
Selects the first letter in a paragraph like a newspaper article

Compatibility
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22) X:nth-child(n)

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

23) X:nth-last-child(n)

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24) X:nth-of-type(n)


  1. ul:nth-of-type(3) {  
  2.    border1px solid black;  
Selects the 3rd div in the page.

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

25) X:nth-last-of-type(n)

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

26) X:first-child

Compatibility
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27) X:last-child

Compatibility
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera
IE8 supports :first-child but not :last-child...

28) X:only-child


  1. <div><p> My paragraph here. </p></div>  
  2.   
  3. <div>  
  4.    <p> Two paragraphs total. </p>  
  5.    <p> Two paragraphs total. </p>  
  6. </div> 

  1. div p:only-child {  
  2.    colorred;  
  3. }  
Only targets the 1st div as its only got one child element p.

Compatibility
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29) X:only-of-type

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30) X:first-of-type

Compatibility
  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera


Tuesday, 7 August 2012

Android - Install Apps To SD By Default & Move unmoveable Apps to SD

Reference:
http://www.howtogeek.com/114667/how-to-install-android-apps-to-the-sd-card-by-default-move-almost-any-app-to-the-sd-card/

My beloved Nexus One ran out of space the other day - it wasn't the first time that it happened to me, but this time, I couldn't find any apps that I want to remove, so the "low storage" error message kept flashing on my face...

Here, I will be listing the steps on how-to install apps on your android to the SD card by default and also moving the previously unmoveable apps to SD.

Please only take the steps below when the normal, conventional way of freeing storage does not help anymore.

1 - Enable USB Debugging

Settings > Applications > Development > USB debugging


2 - Download & Install the Android SDK here.

There are pre-requisites skipped in this step here, they are basically:

  • Download the Java SDK
  • Change your environment variable, path, to include the directory of the java sdk and the android sdk.
  • run adb on command prompt to make sure it works

3 - Open command prompt and type in (with the device plugged-in)

adb devices


4 - Make sure your device shows up under "List of devices attached"

The most common problem is that the adb doesn't return any attached device despite your computer detects your device. This usually meant that the google usb driver haven't install.

a) Download the Google USB Driver via the SDK Manager.


5 - Run the following command to set the default install location to the SD card

adb shell pm setInstallLocation 2

To revert this change, set the 2 to 0 in the above command line.

0 represents your device internal storage
1 represents auto
2 represents external storage - in this case, the SD card



Thats it! Almost all apps that you install now will automatically install to the SD card. You can also move some of the existing apps (that cannot be move previously) to the SD card.

Note: Some apps are probably better leave it in the internal storage, this are:
  • Launcher app
  • Widgets
  • Animated Wallpapers
  • Apps that you might still use when your SD card is mounted to the computer



Cheers!