Is there a way to forcefully find a CSS selector element/bring it into view?

Question

Let's say for example I'm going through my stylesheet but I can't remember what element a certain CSS selector affects.

Is there any method, tool, or anything that I could do/use to find out what exactly it is affecting?

Thanks!

Answer 1

The inspection of elements feature of the browser is meant for the purpose you want. 1.Open up the index file in any browser(preferably Mozilla Developer edition), 2.Right click and Inspect element, 3.Then open the compiled stylesheet. Find out the style element you want to check the effect of. 4. Go back to inspection, remove/add CSS properties and see the effect in real time.

The other way is to use Adobe brackets. It's live preview feature will highlight the section that involves the code snippet, you point your cursor to.

Answer 2

In addition to using your browser's development tools, there are two easy ways to do it that should work in almost any browser (no matter how bad the developer environment).

Visually

Temporarily set a border or background color for the selector, like:

border: 1px solid red;

Or:

background: red;

This makes it very easy to find the affected elements.

Programmatically

On the JavaScript console, use:

 // Replace with something that prints the relevant details
 var stringify = function(element) { return element.innerHTML; };

 // Iterate over all affected elements and print relevant info
 var affectedElements = document.querySelectorAll('.your .selector');
 var len = affectedElements.length;
 console.log('Elements affected: ' + len);
 for (var i = 0; i < len; i++) {
    var affectedElement = affectedElements[i];
    console.log(
        'Element ' + (i+1) + ':\n' +
         stringify(affectedElement) + '\n\n');
 }

Answer 3

I just opened up a random bootstrap template site and did what you where asking for.

Open up your chrome browser (I prefer this as I feel this is easy to debug both Jquery and css) and Press F12, you will get a developer window as in the image.

1. Switch to the console tab.
2. Use Jquery selector to select all the intended elements (you can use the same css selector here too but just place them inside $('')) Eg: $('.tab-content') I am trying to find out all the elements with the class tab-content
3. The result is all the elements of that selector.

NOTE: This appraoch woud require you to have Jquery loaded into your page. Else the script will throw an error saying $ is not defind.