diff --git a/package.json b/package.json
index c72b90d871..55eb703334 100644
--- a/package.json
+++ b/package.json
@@ -298,6 +298,7 @@
     "null-loader": "^0.1.1",
     "postcss-cssnext": "^3.0.2",
     "raw-loader": "^0.5.1",
+    "react-addons-perf": "^15.4.2",
     "redux-saga-test-plan": "^3.0.2",
     "script-ext-html-webpack-plugin": "^2.0.1",
     "sinon": "^5.0.7",
diff --git a/src/actions/index.js b/src/actions/index.js
index f032d32f9c..e02d924919 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -22,7 +22,10 @@ import {
 } from './projects';
 
 import {
+  currentCursorChanged,
   focusLine,
+  editorBlurred,
+  editorFocused,
   editorFocusedRequestedLine,
   startDragColumnDivider,
   stopDragColumnDivider,
@@ -93,6 +96,8 @@ export {
   unhideComponent,
   toggleComponent,
   focusLine,
+  editorBlurred,
+  editorFocused,
   editorFocusedRequestedLine,
   previousConsoleHistory,
   nextConsoleHistory,
@@ -100,6 +105,7 @@ export {
   stopDragColumnDivider,
   notificationTriggered,
   userDismissedNotification,
+  currentCursorChanged,
   updateNotificationMetadata,
   exportProject,
   projectExportDisplayed,
diff --git a/src/actions/ui.js b/src/actions/ui.js
index a68835a03f..039b9fc28b 100644
--- a/src/actions/ui.js
+++ b/src/actions/ui.js
@@ -12,6 +12,15 @@ export const editorFocusedRequestedLine = createAction(
   'EDITOR_FOCUSED_REQUESTED_LINE',
 );
 
+export const editorFocused = createAction(
+  'EDITOR_FOCUSED',
+  (source, cursor, language) => ({source, cursor, language}),
+);
+
+export const editorBlurred = createAction(
+  'EDITOR_BLURRED',
+);
+
 export const startDragColumnDivider = createAction(
   'START_DRAG_COLUMN_DIVIDER',
 );
@@ -34,6 +43,15 @@ export const userDismissedNotification = createAction(
   type => ({type}),
 );
 
+export const currentCursorChanged = createAction(
+  'CURRENT_CURSOR_CHANGED',
+  (source, cursor, language) => ({source, cursor, language}),
+);
+
+export const currentFocusedSelectorChanged = createAction(
+  'CURRENT_FOCUSED_SELECTOR_CHANGED',
+);
+
 export const updateNotificationMetadata = createAction(
   'UPDATE_NOTIFICATION_METADATA',
   (type, metadata) => ({type, metadata}),
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
index bc0b1eb74a..43d0b132c2 100644
--- a/src/components/Editor.jsx
+++ b/src/components/Editor.jsx
@@ -129,9 +129,27 @@ class Editor extends React.Component {
 
   _startNewSession(source) {
     const session = createAceSessionWithoutWorker(this.props.language, source);
+    const cursor = session.selection.lead;
     session.on('change', () => {
       this.props.onInput(this._editor.getValue());
     });
+    session.selection.on('changeCursor', () => {
+      this.props.onCursorChange(
+        this._editor.getValue(),
+        cursor,
+        this.props.language,
+      );
+    });
+    this._editor.on('blur', () => {
+      this.props.onEditorBlurred();
+    });
+    this._editor.on('focus', () => {
+      this.props.onEditorFocused(
+        this._editor.getValue(),
+        cursor,
+        this.props.language,
+      );
+    });
     session.setAnnotations(this.props.errors);
     this._editor.setSession(session);
     this._editor.moveCursorTo(0, 0);
@@ -147,6 +165,9 @@ Editor.propTypes = {
   requestedFocusedLine: PropTypes.instanceOf(EditorLocation),
   source: PropTypes.string.isRequired,
   textSizeIsLarge: PropTypes.bool.isRequired,
+  onCursorChange: PropTypes.func.isRequired,
+  onEditorBlurred: PropTypes.func.isRequired,
+  onEditorFocused: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onRequestedLineFocused: PropTypes.func.isRequired,
 };
diff --git a/src/components/EditorsColumn.jsx b/src/components/EditorsColumn.jsx
index 690700ff15..6fd8366d03 100644
--- a/src/components/EditorsColumn.jsx
+++ b/src/components/EditorsColumn.jsx
@@ -24,6 +24,9 @@ export default function EditorsColumn({
   requestedFocusedLine,
   onComponentHide,
   onComponentUnhide,
+  onEditorBlurred,
+  onEditorCursorChange,
+  onEditorFocused,
   onEditorInput,
   onRef,
   onRequestedLineFocused,
@@ -65,6 +68,9 @@ export default function EditorsColumn({
           requestedFocusedLine={requestedFocusedLine}
           source={currentProject.sources[language]}
           textSizeIsLarge={isTextSizeLarge}
+          onCursorChange={onEditorCursorChange}
+          onEditorBlurred={onEditorBlurred}
+          onEditorFocused={onEditorFocused}
           onInput={partial(
             onEditorInput,
             currentProject.projectKey,
@@ -133,6 +139,9 @@ EditorsColumn.propTypes = {
   style: PropTypes.object.isRequired,
   onComponentHide: PropTypes.func.isRequired,
   onComponentUnhide: PropTypes.func.isRequired,
+  onEditorBlurred: PropTypes.func.isRequired,
+  onEditorCursorChange: PropTypes.func.isRequired,
+  onEditorFocused: PropTypes.func.isRequired,
   onEditorInput: PropTypes.func.isRequired,
   onRef: PropTypes.func.isRequired,
   onRequestedLineFocused: PropTypes.func.isRequired,
diff --git a/src/components/Preview.jsx b/src/components/Preview.jsx
index 7f7f00b1aa..0ec5737bdd 100644
--- a/src/components/Preview.jsx
+++ b/src/components/Preview.jsx
@@ -8,6 +8,7 @@ import PreviewFrame from './PreviewFrame';
 export default function Preview({
   compiledProjects,
   consoleEntries,
+  focusedSelector,
   showingErrors,
   onConsoleError,
   onConsoleLog,
@@ -24,6 +25,7 @@ export default function Preview({
     <PreviewFrame
       compiledProject={compiledProject}
       consoleEntries={consoleEntries}
+      focusedSelector={focusedSelector}
       isActive={key === compiledProjects.keySeq().last()}
       key={compiledProject.compiledProjectKey}
       onConsoleError={onConsoleError}
@@ -57,6 +59,7 @@ export default function Preview({
 Preview.propTypes = {
   compiledProjects: ImmutablePropTypes.iterable.isRequired,
   consoleEntries: ImmutablePropTypes.iterable.isRequired,
+  focusedSelector: PropTypes.string,
   showingErrors: PropTypes.bool.isRequired,
   onConsoleError: PropTypes.func.isRequired,
   onConsoleLog: PropTypes.func.isRequired,
@@ -65,3 +68,7 @@ Preview.propTypes = {
   onRefreshClick: PropTypes.func.isRequired,
   onRuntimeError: PropTypes.func.isRequired,
 };
+
+Preview.defaultProps = {
+  focusedSelector: null,
+};
diff --git a/src/components/PreviewFrame.jsx b/src/components/PreviewFrame.jsx
index 2aa455b120..1335b09511 100644
--- a/src/components/PreviewFrame.jsx
+++ b/src/components/PreviewFrame.jsx
@@ -47,6 +47,7 @@ class PreviewFrame extends React.Component {
     const {consoleEntries, isActive} = this.props;
 
     if (this._channel && isActive) {
+      this._postFocusedSelectorToFrame(this.props.focusedSelector);
       for (const [key, {expression}] of consoleEntries) {
         if (!prevConsoleEntries.has(key) && expression) {
           this._evaluateConsoleExpression(key, expression);
@@ -135,6 +136,13 @@ class PreviewFrame extends React.Component {
     this.props.onConsoleLog(printedValue, compiledProjectKey);
   }
 
+  _postFocusedSelectorToFrame(selector) {
+    this._channel.notify({
+      method: 'highlightElement',
+      params: selector,
+    });
+  }
+
   _attachToFrame(frame) {
     if (!frame) {
       if (this._channel) {
@@ -168,6 +176,7 @@ class PreviewFrame extends React.Component {
 PreviewFrame.propTypes = {
   compiledProject: PropTypes.instanceOf(CompiledProjectRecord).isRequired,
   consoleEntries: ImmutablePropTypes.iterable.isRequired,
+  focusedSelector: PropTypes.string,
   isActive: PropTypes.bool.isRequired,
   onConsoleError: PropTypes.func.isRequired,
   onConsoleLog: PropTypes.func.isRequired,
@@ -175,4 +184,8 @@ PreviewFrame.propTypes = {
   onRuntimeError: PropTypes.func.isRequired,
 };
 
+PreviewFrame.defaultProps = {
+  focusedSelector: null,
+};
+
 export default PreviewFrame;
diff --git a/src/containers/EditorsColumn.js b/src/containers/EditorsColumn.js
index 4f3ebe67f4..92ef909622 100644
--- a/src/containers/EditorsColumn.js
+++ b/src/containers/EditorsColumn.js
@@ -9,10 +9,13 @@ import {
   isTextSizeLarge,
 } from '../selectors';
 import {
+  currentCursorChanged,
   editorFocusedRequestedLine,
   hideComponent,
   updateProjectSource,
   unhideComponent,
+  editorBlurred,
+  editorFocused,
 } from '../actions';
 
 function mapStateToProps(state) {
@@ -41,6 +44,33 @@ function mapDispatchToProps(dispatch) {
     onRequestedLineFocused() {
       dispatch(editorFocusedRequestedLine());
     },
+
+    onEditorCursorChange(source, cursor, language) {
+      dispatch(
+        currentCursorChanged(
+          source,
+          cursor,
+          language,
+        ),
+      );
+    },
+
+    onEditorBlurred() {
+      dispatch(
+        editorBlurred(),
+      );
+    },
+
+    onEditorFocused(source, cursor, language) {
+      dispatch(
+        editorFocused(
+          source,
+          cursor,
+          language,
+        ),
+      );
+    },
+
   };
 }
 
diff --git a/src/containers/Preview.js b/src/containers/Preview.js
index 0b92235a01..d19fb0fc6b 100644
--- a/src/containers/Preview.js
+++ b/src/containers/Preview.js
@@ -12,6 +12,7 @@ import {
 import {
   getCompiledProjects,
   getConsoleHistory,
+  getFocusedSelector,
   isCurrentProjectSyntacticallyValid,
   isUserTyping,
 } from '../selectors';
@@ -20,6 +21,7 @@ function mapStateToProps(state) {
   return {
     compiledProjects: getCompiledProjects(state),
     consoleEntries: getConsoleHistory(state),
+    focusedSelector: getFocusedSelector(state),
     showingErrors: (
       !isUserTyping(state) &&
         !isCurrentProjectSyntacticallyValid(state)
diff --git a/src/preview.js b/src/preview.js
index 08ec4e543f..63d57fc71c 100644
--- a/src/preview.js
+++ b/src/preview.js
@@ -3,8 +3,11 @@ import handleConsoleExpressions
   from './previewSupport/handleConsoleExpressions';
 import handleConsoleLogs from './previewSupport/handleConsoleLogs';
 import overrideAlert from './previewSupport/overrideAlert';
+import handleElementHighlights from './previewSupport/handleElementHighlights';
 
 handleErrors();
 handleConsoleExpressions();
 handleConsoleLogs();
 overrideAlert();
+handleElementHighlights();
+
diff --git a/src/previewSupport/handleElementHighlights.js b/src/previewSupport/handleElementHighlights.js
new file mode 100644
index 0000000000..475a635732
--- /dev/null
+++ b/src/previewSupport/handleElementHighlights.js
@@ -0,0 +1,65 @@
+import throttle from 'lodash-es/throttle';
+
+import channel from './channel';
+
+const RESIZE_THROTTLE = 250;
+let highlightSelector = null;
+
+const handleWindowResize = throttle(() => {
+  updateCovers(highlightSelector);
+}, RESIZE_THROTTLE);
+
+window.addEventListener('resize', handleWindowResize);
+
+function getOffsetFromBody(element) {
+  if (element === document.body) {
+    return {top: 0, left: 0};
+  }
+  const {top, left} = getOffsetFromBody(element.offsetParent);
+  return {top: top + element.offsetTop, left: left + element.offsetLeft};
+}
+
+function removeCovers() {
+  const highlighterElements =
+    document.querySelectorAll('.__popcode-highlighter');
+  for (const highlighterElement of highlighterElements) {
+    highlighterElement.remove();
+  }
+}
+
+function addCovers(selector) {
+  const elements = document.querySelectorAll(selector);
+  for (const element of elements) {
+    const cover = document.createElement('div');
+    const rect = element.getBoundingClientRect();
+    let offset = {top: rect.top, left: rect.left};
+    if (element.offsetParent === null) {
+      cover.style.position = 'fixed';
+    } else if (element !== document.body ||
+      element !== document.documentElement) {
+      offset = getOffsetFromBody(element);
+    }
+    document.body.appendChild(cover);
+    cover.classList = '__popcode-highlighter';
+    cover.style.left = `${offset.left}px`;
+    cover.style.top = `${offset.top}px`;
+    cover.style.width = `${element.offsetWidth}px`;
+    cover.style.height = `${element.offsetHeight}px`;
+    cover.classList.add('fade');
+  }
+}
+
+function updateCovers(selector) {
+  removeCovers();
+  if (selector !== null) {
+    highlightSelector = selector;
+    addCovers(selector);
+  }
+}
+
+export default function handleElementHighlights() {
+  channel.bind(
+    'highlightElement',
+    (_trans, selector) => updateCovers(selector),
+  );
+}
diff --git a/src/records/UiState.js b/src/records/UiState.js
index fcfaddfc5a..e0da97b061 100644
--- a/src/records/UiState.js
+++ b/src/records/UiState.js
@@ -10,4 +10,5 @@ export default Record({
   openTopBarMenu: null,
   requestedFocusedLine: null,
   saveIndicatorShown: false,
+  focusedSelector: null,
 }, 'UiState');
diff --git a/src/reducers/ui.js b/src/reducers/ui.js
index ea89335059..72bc00e63f 100644
--- a/src/reducers/ui.js
+++ b/src/reducers/ui.js
@@ -66,6 +66,17 @@ export default function ui(stateIn, action) {
     case 'EDITOR_FOCUSED_REQUESTED_LINE':
       return state.set('requestedFocusedLine', null);
 
+    case 'CURRENT_FOCUSED_SELECTOR_CHANGED':
+      return state.setIn(
+        ['focusedSelector'], action.payload,
+      );
+
+    case 'EDITOR_BLURRED':
+      return state.setIn(
+        ['focusedSelector'],
+        null,
+      );
+
     case 'START_DRAG_COLUMN_DIVIDER':
       return state.set('isDraggingColumnDivider', true);
 
diff --git a/src/sagas/ui.js b/src/sagas/ui.js
index d21639ec97..5e4a24366b 100644
--- a/src/sagas/ui.js
+++ b/src/sagas/ui.js
@@ -5,6 +5,7 @@ import {
   userDoneTyping as userDoneTypingAction,
   showSaveIndicator,
   hideSaveIndicator,
+  currentFocusedSelectorChanged,
 } from '../actions/ui';
 import {getCurrentProject} from '../selectors';
 import {
@@ -14,7 +15,16 @@ import {
 import {openWindowWithContent} from '../util';
 import spinnerPageHtml from '../../templates/project-export.html';
 import compileProject from '../util/compileProject';
+import retryingFailedImports from '../util/retryingFailedImports';
 
+export async function importSelectorAtCursor() {
+  return retryingFailedImports(
+    () => import(
+      /* webpackChunkName: "mainAsync" */
+      '../util/selectorAtCursor',
+    ),
+  );
+}
 export function* userDoneTyping() {
   yield put(userDoneTypingAction());
 }
@@ -61,11 +71,19 @@ export function* exportProject() {
   );
 }
 
+export function* updateFocusedSelector({payload: {source, cursor, language}}) {
+  const {selectorAtCursor} = yield call(importSelectorAtCursor);
+  const selector = yield call(selectorAtCursor, source, cursor, language);
+  yield put(currentFocusedSelectorChanged(selector));
+}
+
 export default function* () {
   yield all([
     debounceFor('UPDATE_PROJECT_SOURCE', userDoneTyping, 1000),
     takeEvery('POP_OUT_PROJECT', popOutProject),
     takeEvery('EXPORT_PROJECT', exportProject),
     debounceFor('PROJECT_SUCCESSFULLY_SAVED', projectSuccessfullySaved, 1000),
+    takeEvery('CURRENT_CURSOR_CHANGED', updateFocusedSelector),
+    takeEvery('EDITOR_FOCUSED', updateFocusedSelector),
   ]);
 }
diff --git a/src/selectors/getFocusedSelector.js b/src/selectors/getFocusedSelector.js
new file mode 100644
index 0000000000..3d51bb47e8
--- /dev/null
+++ b/src/selectors/getFocusedSelector.js
@@ -0,0 +1,3 @@
+export default function getFocusedSelector(state) {
+  return state.getIn(['ui', 'focusedSelector']);
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
index 30db47c62e..b81de07bf7 100644
--- a/src/selectors/index.js
+++ b/src/selectors/index.js
@@ -16,6 +16,7 @@ import getCurrentValidationState from './getCurrentValidationState';
 import getEnabledLibraries from './getEnabledLibraries';
 import getErrors from './getErrors';
 import getHiddenUIComponents from './getHiddenUIComponents';
+import getFocusedSelector from './getFocusedSelector';
 import getNotifications from './getNotifications';
 import getOpenTopBarMenu from './getOpenTopBarMenu';
 import getProject from './getProject';
@@ -59,6 +60,7 @@ export {
   getEnabledLibraries,
   getErrors,
   getHiddenUIComponents,
+  getFocusedSelector,
   getNotifications,
   getOpenTopBarMenu,
   getProject,
diff --git a/src/util/compileProject.js b/src/util/compileProject.js
index fc12502fbd..b721955cb1 100644
--- a/src/util/compileProject.js
+++ b/src/util/compileProject.js
@@ -8,6 +8,8 @@ import uniq from 'lodash-es/uniq';
 
 import config from '../config';
 
+import highlighterCss from '../../templates/highlighter.css';
+
 import retryingFailedImports from './retryingFailedImports';
 
 const downloadingScript = downloadScript();
@@ -180,6 +182,12 @@ async function addJavascript(
   doc.body.appendChild(scriptTag);
 }
 
+function addHighlighterCss(doc) {
+  const styleTag = doc.createElement('style');
+  styleTag.innerHTML = highlighterCss;
+  doc.head.appendChild(styleTag);
+}
+
 export function generateTextPreview(project) {
   const {title} = constructDocument(project);
   return (title || '').trim();
@@ -201,6 +209,7 @@ export default async function compileProject(
     await addPreviewSupportScript(doc);
   }
   await addJavascript(doc, project, {breakLoops: isInlinePreview});
+  addHighlighterCss(doc);
 
   return {
     title: (doc.title || '').trim(),
diff --git a/src/util/selectorAtCursor.js b/src/util/selectorAtCursor.js
new file mode 100644
index 0000000000..e286a5add1
--- /dev/null
+++ b/src/util/selectorAtCursor.js
@@ -0,0 +1,31 @@
+import postcss from 'postcss';
+
+export function selectorAtCursor(source, cursor, language) {
+  let highlighterSelector = null;
+  if (language === 'css') {
+    try {
+      const rootNode = postcss.parse(source);
+      rootNode.walkRules((rule) => {
+        const ruleStartRow = rule.source.start.line;
+        const ruleStartCol = rule.source.start.column;
+        const ruleEndRow = rule.source.end.line;
+        const ruleEndCol = rule.source.end.column;
+        const cursorRow = cursor.row + 1;
+        const cursorCol = cursor.column + 1;
+        if (
+          (cursorRow > ruleStartRow && cursorRow < ruleEndRow) ||
+          (cursorRow === ruleStartRow && cursorCol >= ruleStartCol) ||
+          (cursorRow === ruleEndRow && cursorCol <= ruleEndCol)
+        ) {
+          highlighterSelector = rule.selector;
+          return false;
+        }
+        return null;
+      });
+      return highlighterSelector;
+    } catch (e) {
+      return null;
+    }
+  }
+  return null;
+}
diff --git a/templates/highlighter.css b/templates/highlighter.css
new file mode 100644
index 0000000000..d580cc8ea5
--- /dev/null
+++ b/templates/highlighter.css
@@ -0,0 +1,21 @@
+.__popcode-highlighter {
+  z-index: 2000000;
+  margin: -1px 0px 0px -1px;
+  padding: 0px;
+  position: absolute;
+  pointer-events: none;
+  border-radius: 0px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #00b8ff;
+  box-shadow: #ffffff 0px 0px 1px;
+  box-sizing: content-box;
+  background-color: #00b8ff;
+  opacity: .5;
+  transition-property: opacity, background-color;
+  transition-duration: 300ms, 2.3s;
+}
+
+.__popcode-highlighter.fade {
+  background-color: #ffffff00;
+}
diff --git a/test/unit/reducers/ui.js b/test/unit/reducers/ui.js
index a3f19fb143..44aa761994 100644
--- a/test/unit/reducers/ui.js
+++ b/test/unit/reducers/ui.js
@@ -23,6 +23,7 @@ import {
   cancelEditingInstructions,
   showSaveIndicator,
   hideSaveIndicator,
+  currentFocusedSelectorChanged,
 } from '../../../src/actions/ui';
 import {
   snapshotCreated,
@@ -333,3 +334,25 @@ test('toggleTopBarMenu', (t) => {
     initialState.set('openTopBarMenu', 'silly'),
   ));
 });
+
+test('updateSelector', (t) => {
+  t.test('focusSelector', reducerTest(
+    reducer,
+    initialState,
+    partial(currentFocusedSelectorChanged, 'h1'),
+    initialState.set(
+      'focusedSelector',
+      'h1',
+    ),
+  ));
+
+  t.test('unFocusSelector', reducerTest(
+    reducer,
+    initialState.set(
+      'focusedSelector',
+      'h1',
+    ),
+    partial(currentFocusedSelectorChanged, null),
+    initialState,
+  ));
+});
diff --git a/test/unit/sagas/ui.js b/test/unit/sagas/ui.js
index 9b1a4db051..e28dfb9ba0 100644
--- a/test/unit/sagas/ui.js
+++ b/test/unit/sagas/ui.js
@@ -6,6 +6,8 @@ import {
   exportProject as exportProjectSaga,
   popOutProject as popOutProjectSaga,
   projectSuccessfullySaved as projectSuccessfullySavedSaga,
+  updateFocusedSelector as updateFocusedSelectorSaga,
+  importSelectorAtCursor,
 } from '../../../src/sagas/ui';
 import {getCurrentProject} from '../../../src/selectors';
 import {
@@ -13,6 +15,7 @@ import {
   popOutProject,
   showSaveIndicator,
   hideSaveIndicator,
+  currentFocusedSelectorChanged,
 } from '../../../src/actions/ui';
 import {
   projectExported,
@@ -23,6 +26,7 @@ import {
 import {openWindowWithContent} from '../../../src/util';
 import spinnerPageHtml from '../../../templates/project-export.html';
 import compileProject from '../../../src/util/compileProject';
+import {selectorAtCursor} from '../../../src/util/selectorAtCursor';
 
 test('userDoneTyping', (assert) => {
   testSaga(userDoneTypingSaga).
@@ -97,3 +101,17 @@ test('projectSuccessfullySaved', (assert) => {
     next().isDone();
   assert.end();
 });
+
+test('projectSuccessfullySaved', (assert) => {
+  const source = 'body{}';
+  const cursor = {column: 1, row: 0};
+  const language = 'css';
+  const selector = 'body';
+
+  testSaga(updateFocusedSelectorSaga, {payload: {source, cursor, language}}).
+    next().call(importSelectorAtCursor).
+    next({selectorAtCursor}).call(selectorAtCursor, source, cursor, language).
+    next(selector).put(currentFocusedSelectorChanged(selector)).
+    next().isDone();
+  assert.end();
+});
diff --git a/test/unit/util/selectorAtCursor.js b/test/unit/util/selectorAtCursor.js
new file mode 100644
index 0000000000..b1c08890f8
--- /dev/null
+++ b/test/unit/util/selectorAtCursor.js
@@ -0,0 +1,20 @@
+import test from 'tape';
+
+import {selectorAtCursor} from '../../../src/util/selectorAtCursor';
+import {css} from '../../data/acceptance.json';
+
+const [source] = css;
+
+test('cursor in css rule returns correct selector', (assert) => {
+  const cursor = {column: 1, row: 0};
+  assert.isEqual(selectorAtCursor(source, cursor, 'css'), 'body');
+  assert.end();
+});
+
+test('cursor outside css rule returns null', (assert) => {
+  const cursor = {column: 1, row: 2};
+  assert.isEqual(selectorAtCursor(source, cursor, 'css'), null);
+  assert.end();
+});
+
+
diff --git a/yarn.lock b/yarn.lock
index 1753f1d428..991d069eb0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4142,6 +4142,18 @@ fbjs@^0.8.16:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
+fbjs@^0.8.4:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
@@ -8507,6 +8519,13 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-addons-perf@^15.4.2:
+  version "15.4.2"
+  resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
+  dependencies:
+    fbjs "^0.8.4"
+    object-assign "^4.1.0"
+
 react-copy-to-clipboard@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
@@ -10450,7 +10469,7 @@ ua-parser-js@0.7.17:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
-ua-parser-js@^0.7.9:
+ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
   version "0.7.18"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"