--- a/devtools/server/css-logic.js
+++ b/devtools/server/css-logic.js
@@ -910,16 +910,17 @@ function CssRule(cssSheet, domRule, elem
   if (parentRule && parentRule.type == CSSRule.MEDIA_RULE) {
     this.mediaText = parentRule.media.mediaText;
   }
 
   if (this._cssSheet) {
     // parse domRule.selectorText on call to this.selectors
     this._selectors = null;
     this.line = domUtils.getRuleLine(this.domRule);
+    this.column = domUtils.getRuleColumn(this.domRule);
     this.source = this._cssSheet.shortSource + ":" + this.line;
     if (this.mediaText) {
       this.source += " @media " + this.mediaText;
     }
     this.href = this._cssSheet.href;
     this.contentRule = this._cssSheet.contentSheet;
   } else if (element) {
     this._selectors = [ new CssSelector(this, "@element.style", 0) ];
@@ -1103,16 +1104,26 @@ CssSelector.prototype = {
    * @return {number} the line of the parent CSSStyleRule in the parent
    * stylesheet.
    */
   get ruleLine() {
     return this.cssRule.line;
   },
 
   /**
+   * Retrieve the column of the parent CSSStyleRule in the parent CSSStyleSheet.
+   *
+   * @return {number} the column of the parent CSSStyleRule in the parent
+   * stylesheet.
+   */
+  get ruleColumn() {
+    return this.cssRule.column;
+  },
+
+  /**
    * Retrieve specificity information for the current selector.
    *
    * @see http://www.w3.org/TR/css3-selectors/#specificity
    * @see http://www.w3.org/TR/CSS2/selector.html
    *
    * @return {Number} The selector's specificity.
    */
   get specificity() {
@@ -1387,16 +1398,26 @@ CssSelectorInfo.prototype = {
    * @return {number} the line of the parent CSSStyleRule in the parent
    * stylesheet.
    */
   get ruleLine() {
     return this.selector.ruleLine;
   },
 
   /**
+   * Retrieve the column of the parent CSSStyleRule in the parent CSSStyleSheet.
+   *
+   * @return {number} the column of the parent CSSStyleRule in the parent
+   * stylesheet.
+   */
+  get ruleColumn() {
+    return this.selector.ruleColumn;
+  },
+
+  /**
    * Check if the selector comes from a browser-provided stylesheet.
    *
    * @return {boolean} true if the selector comes from a browser-provided
    * stylesheet, or false otherwise.
    */
   get contentRule() {
     return this.selector.contentRule;
   },
@@ -1453,16 +1474,23 @@ CssSelectorInfo.prototype = {
 
     if (this.ruleLine > that.ruleLine) {
       return -1;
     }
     if (that.ruleLine > this.ruleLine) {
       return 1;
     }
 
+    if (this.ruleColumn > that.ruleColumn) {
+      return -1;
+    }
+    if (that.ruleColumn > this.ruleColumn) {
+      return 1;
+    }
+
     return 0;
   },
 
   toString: function () {
     return this.selector + " -> " + this.value;
   },
 };