I have googled, but found no satisfactory answer.
Is there a way to execute a CSS selector live in the browser in the same way you can with JavaScript in the console?
I know I can modify the CSS in the Styles pain, but this doesn't seem to let me add psuedo selectors such as :first-of-type. It also doesn't appear to show all tags affected or the tag set returned by a selector.
Is there a way I can execute section.blah:first-of-type and see the returned or affected elements?
I'm using only Chrome right now but can use FF or whatever if it gives me this feature.
In the Elements tab, you can search with selector syntax.
If you search for
.myclass
you will find elements that have class="myclass"
I think that this is the closest that you can get to what you are asking
Go to the elements tab, and press ctrl+F (for find). in the example below, enter div.answer
to the right of the search string, you see "1 of 3" stating that 3 elements met your criteria. The current one is highlighted. and you can go up & down thru the items with the arrows.
If you use jQuery in your page then you can do:
$("section.blah:first-of-type");
Executing that in the browser console will show you a list of elements that jquery matched.
Better yet you can assign it to a variable and traverse it programatically.
Acctually you can do that just via editing the Styles pane.
You have to select a parent first(html in my case).
The result is:
In this way, chrome will show all affection instantly. Not just highlight the DOM tree.
Related
Refresh icon. Can some one help me to locate an element (XPath or CSS) which is displayed?
<svg class="ult-icon .....height: 20px;">
HTML below: link.
The short answer is No, no one here can find the element you need for you. First, we'd need to see the entire page to tell you how to access the element, it may be in an iframe or multiple iframes, etc. Second, that's not really how this works.
What we can do is help you find it yourself. So, here's what I would try.
First, I'd use FireFox's developer version and inspect the element. To do this browse to the page in Firefox, right click on the element in the page and select inspect. This will open a new screen that you can use to see the HTML and JavaScript. From there you can right click on the selected element and copy the XPath, CSSS selector or grab the id from either of those.
Second, you need to determine if you are in an iframe. Once you are in the inspection screen, there is a path bar that can scroll left and right at the bottom of the screen. Check that to confirm that and look for iframe tags to determine if your element is inside of an iframe. If it is, you will need to switch to the correct frame before accessing the element. You may have to switch into multiple iframes, like moving through a directory structure, before you get to the correct one. Once you are there you should be able to access and work with the element.
Third, depending on the element you may find that some Find By methods work better than others. Try the Find By Xpath, CSS Selector, Link Text or Id until you get one that works. This is just trial and error. I usually start with the Xpath.
I have an element which receives inline style from some js function.
I found the function.
but wanted to ask, is there a way to find out what function put that inline style?
(in "computed" tab, I saw all the css files which affected this element, but inline styleshs the title "element.style" , is there any other way?
Using Chrome dev tools, you can add breakpoint on elements when any modification happens to them.
Right click after inspecting the element, and select Break on. Now whenever that element gets modified, Dev tools will go to the source of the function doing that job.
No, in devtools there's no in-box solution for that.
But you can use good old debug messages to track who sets what.
Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image.
Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through.
Is there a way to know what overrides such a rule?
Look at the one which isn't striked out, higher up on the list.
Alternatively, view the computed styles. They will be the definitive applied styles.
When you inspect an element, you can show the 'box'. Just bottom of that, you have a 'filter' which should show you every properties being applied to your element.
If you click on a property, it will give you the file and the line number.
Developer Tools will list all rules for an element. Just read through all the CSS rules that apply, and check for a non-struck-through one with the same name.
Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.
Go to the Computed tab of Chrome Developer tools. Find wanted property and expand details.
Firebug is great, and allows me to see all the CSS applied to an element in the DOM that you select, but either you can:
a) View it line by line, as defined in the CSS, in the applied order (very useful but not what I'm looking for) or
b) View it "computed", which is all CSS rules and the values that this element has.
What I want is a tool or extension that allows me to select an element and would show me, in copy-pastable form, all the CSS that's been defined for that element. If the element has font-style:normal just because it's the default for that element, I don't want that there (Firebug shows all this in computed view).
Basically I want to be able to:
I see an element I'd like to replicate on a website (like a button) exactly in my own website.
Use this tool to get a bunch of CSS applied to that element.
Paste on my own CSS.
Get the same looking element in my website. Yay!
Any ideas?
Switch to Chrome default element inspector (press F12), it has all that you need. You'll find everything in the Computed Style panel, including a useful "Show inherited" checkbox
I know the question is almost 4 years old, but if there is someone looking for it today, there's a Chrome extension that handles it. https://github.com/kdzwinel/SnappySnippet
It adds a new tab in Chrome Inspector and you just need to click a button to get all html and css of the selected element and its children. Then you can export it to codepen, jsfiddle and jsbin, or copy and paste.
Google Chrome has tools like Firebug built in called "Chrome Developer Tools". It is extremely powerful from my experience and I switched from Firefox/Firebug to Chrome about a year ago. There are several different ways to get the developer tools up. You can find detailed documentation at https://developers.google.com/chrome-developer-tools/docs/overview
When you have the Chrome developer tools open to the elements tab with an element selected, you can expand the computed styles area on the right and see all styles that make up that element.
If the specific style has an expandable triangle to its left, you can find out what stylesheet and where the styling comes from.
You don't need any extensions for that, the built-in inspector in Firefox can do that. Right-click the element, choose "Inspect Element". Click the Style button in the bottom toolbar - and there it is, a sidebar with all the styles applied to that element.
I have tried to calculate it via window.getComputedStyle and it is needed to be optimized to shake out unnecessary style properties. https://github.com/aleen42/DOM-mirror
I've tried SnappySnippet and found CSSSteal to be much better. It will grab just the CSS, and will do so in the same format as the document has it, unlike SnappySnippet.
There's an API on window Object >> window.getComputedStyle(DOMElement). This is if we need to work with computed styles programmatically.
MDN Docs for window.getComputedStyle
Good Luck...
You can try this extension https://getcssscan.com/?ref=beautifulcheckboxes_header but it is not free. I found this while I was finding a solution.
Is there a way to bold only part of the text in a drop down list option or is this not possible?
I know that you can style the entire option with CSS, but that is not what I am looking for. And HTML inside of an option tag does not render.
Here would be an example of a drop down list item:
SomeID - Description of ID
You cannot do this. The most likely solution you'll find "out there" would be to add a surrounding span with hard coded style, but neither IE (7) nor Firefox (3.0.12) honor this. In fact, if you look at the generated source in Firefox, the internal span is completely stripped out.
What you can do is use a JavaScript solution to give you the appearance of a select without actually using a select.
EDIT: And here's a great HOWTO on how to do it: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
Not possible or at least not working cross browsers. If you really need this, you can create your own dropdown but I wouldn't recommend it.