Standard CSS3 Selectors

Here’s a table with all the standard CSS3 selectors. This is a really great reference and this can be used to either query nodes using dojo.query or to use in a browser which supports these. Most modern browsers do, IE versions will have quirks as usual so don’t rely on this in Internet Explorer 8 and below. Also, this table is from the above linked dojo.query page, I just find it very useful to have it handy during programming.

* any element
E an element of type E
E[foo] an E element with a “foo” attribute
E[foo=”bar”] an E element whose “foo” attribute value is exactly equal to “bar”
E[foo~=”bar”] an E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “bar”
E[foo^=”bar”] an E element whose “foo” attribute value begins exactly with the string “bar”
E[foo$=”bar”] an E element whose “foo” attribute value ends exactly with the string “bar”
E[foo*=”bar”] an E element whose “foo” attribute value contains the substring “bar”
E[hreflang|=”en”] an E element whose “hreflang” attribute has a hyphen-separated list of values beginning (from the left) with “en”
E:root an E element, root of the document
E:nth-child(n) an E element, the n-th child of its parent
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
E:nth-of-type(n) an E element, the n-th sibling of its type
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
E:first-child an E element, first child of its parent
E:last-child an E element, last child of its parent
E:first-of-type an E element, first sibling of its type
E:last-of-type an E element, last sibling of its type
E:only-child an E element, only child of its parent
E:only-of-type an E element, only sibling of its type
E:empty an E element that has no children (including text nodes)
E:link
E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
E:active
E:hover
E:focus an E element during certain user actions
E:target an E element being the target of the referring URI
E:lang(fr) an element of type E in language “fr” (the document language specifies how language is determined)
E:enabled
E:disabled a user interface element E which is enabled or disabled
E:checked a user interface element E which is checked (for instance a radio-button or checkbox)
E::first-line the first formatted line of an E element
E::first-letter the first formatted letter of an E element
E::selection the portion of an E element that is currently selected/highlighted by the user
E::before generated content before an E element
E::after generated content after an E element
E.warning an E element whose class is “warning” (the document language specifies how class is determined).
E#myid an E element with ID equal to “myid”.
E:not(s) an E element that does not match simple selector s
E F an F element descendant of an E element
E > F an F element child of an E element
E + F an F element immediately preceded by an E element
E ~ F an F element preceded by an E element
Advertisements

JavaScript – Common Array operations

Below are a few common operations one might come across. I’ve used Array.map() and Array.forEach() at times which requires JavaScript 1.6 or higher, but I’m not sure if older versions of Internet Explorer would support them. You might have to use a regular for loop there or use a library like Dojo, etc.

To check if an element exists in a 2-D array – Needle in a Haystack


function findNeedle(num) {
  var arr = [[2, 3, 5], [6, 8, 9], [14, 16, 19], [44, 66, 67]];
  for (var i = 0; i < arr.length; i++) {
    if (arr[i][0] > num) {
      return (arr[i - 1] ? arr[i - 1].indexOf(num) > -1 : false);
    }
  }
}

console.log(findNeedle(8)); // this one is faster because it just looks at the first element of each array.

function findNeedle2(num) {
  var arr = [[2, 3, 5], [6, 8, 9], [14, 16, 19], [44, 66, 67]];
  var flattenedArr = arr.map(function(item) {
    return item.join();
  });

  return flattenedArr.join().indexOf(num) > -1;
}

console.log(findNeedle2(3));  //this one constructs a big string out of the whole array and then does an indexOf on it.

To check if 2 arrays are equal:

function checkIfEqual(arr1, arr2) {
  if (arr1.length != arr2.length) {
    return false;
  }
  //sort them first, then join them and just compare the strings
  return arr1.sort().join() == arr2.sort().join();
}
var arr1 = [2, 3, 5, 6];
var arr2 = [5, 6, 2, 3];

checkIfEqual(arr1, arr2);

To convert an arguments object in a function to an Array, do this:

function add() {
 return [].slice.call(arguments); // note that Array.prototype.slice.call works as well, but [].slice is concise and cool
}

console.log(add(2,3,5));
Aside

JavaScript – common String operations

Comma separated numbers:

//formats 10000045.555 as "10,000,045.555", etc
var num = 10000045.555;
//convert to string and split the string into two if there's a decimal point
var strArr = (num + '').split('.');
var n = strArr[0];

//if there's a decimal, store it
var rhs = strArr.length > 1 ? "." + strArr[1] : '';

//with the whole number, split the last 3 digits, put it at the 0th index of the array
var arr = [];
while(n.length > 3) {
 arr.unshift(n.substring(n.length - 3, n.length));
 n = n.substr(0, n.length -3);
}
//anything left in the string, add it to the start of the array
(n.length > 0 ) ? arr.unshift(n) :'';

console.log(arr.join() + rhs);

To capitalize a word:


//note how you can access the first character of a string, or its 0th index like you would for an array. You can also do str.charAt(0).

var str = "brian";
str = str[0].toUpperCase() + str.substring(1,str.length);

To check if a String is a palindrome – “word that may be read the same way in either direction”

//when you split a string, it coverts to an array, which you can reverse and re-join it which gives you a String.
var str = "abba";
str.split('').reverse().join('') == str

Note that String “literals” are not always equal to String objects.

var a = 'a';
var b = new String('a');
a == b; // true
a === b; // false, because === checks for type AND value

typeof a; //"string"
typeof b; // "object"

//valueOf() fixes this

a.valueOf() === b.valueOf() //true

If a number is too long so that it cant be represented as a number but instead needs a String representation – you need a special way of performing operations on it. For example: to subtract 1 from a really long number(represented as a String)

function subtractOne(num) {
 if(num[num.length-1]*1 === 0) {
 return subtractOne(num.substr(0, num.length-1)) + '9';
 }
 else {
 return num.substr(0, num.length-1) + ('' + num.charAt(num.length-1)*1 -1);
 }
}

subtractOne('1890273492865564687318970981034899286348912374'); //prints "1890273492865564687318970981034899286348912373"