Tip #28 Did you know… That “Go to definition” is supported for CSS Class?

If you have a style defined as Class = ”fooRed”   as shown below and want to quickly know what does fooRed style contain?

  <div class ="fooRed">
    In RED
 </div> 

Just place your cursor on fooRed and hit the F12 button. This will highlight the CSS class for you even if the class lives in the Current Page or in an External style sheet.

F12 is the short cut you can use instead of, Right Clicking fooRed and selecting “Go to Definition” action in the context menu as shown in the picture below.

F12ForCssClass

So, when you hit F12, the class is highlighted as shown below.

Highlighted Style

This way you can get to style definition with just one key –>F12

Reshmi Mangalore

SDET, Visual Web Developer