Anyone know of a tool/Firefox Plugin that would allow me to click on a DOM object in a page and give me the CSS inheritances that Is needed to style that element?
So if there are a bunch of nested elements ol li ol li etc... what should my CSS look like to style said element?
The Web Developer extension is excellent at this as well. The shortcut is Ctrl+Shift+F to activate the click interface...click on any element to see a full inheritance tree.
Firebug will show you the full path to any element (on top of the HTML tab), but it won't automatically generate a CSS selector.
Have a look at firequark .. It is an extension for firebug that extracts css selector for a single or multiple html nodes
There's no one way to create a selector. Ultimately, doing a full ancestry chain for your selectors is asking for trouble, because whenever your document structure changes, your selectors will break. My rule of thumb is to use #id selectors for singleton elements in your document (i.e. #mainNav or #content) and .class selectors for elements that repeat or for mix-ins (i.e. .menuItem, .external).
You want Firebug.
Once you install it, you can right click on any element in the page and choose "Inspect Element" from the context menu. This shows everything you need to know about the element, including a list of all the CSS styles that are acting upon it. For your purposes, you would probably want to use the first selector in the list.
Related
I have a lot of sass for a larger project spread over different files. The compiler then assembles all selectors with the same css and combines them in one css-selector. Seems good and efficient. However, in certain scenarios my css wouldn't work and it seemed to be due to selector size.
I found the following: when I use the 'New Style Rule'-button in Chrome DevTools I can add the following selector, hit tab and insert my css:
a.valign-wrapper:hover i.material-icons,
a.progress-bar:hover i.material-icons,
a.status:hover i.material-icons
However, this second selector doesn't work. When hitting tab it just disappears (without any feedback), seemingly meaning I can't use it.
a.valign-wrapper:hover i.material-icons,
a.progress-bar:hover i.material-icons,
a.status:hover i.material-icons,
.select-wrapper.box a.caret:hover::before i.material-icons
What is the cause of this? And also, would you know of a way to fix this? Since I'm using sass I can't just split the selector onto two lines, since sass will combine them when compiling.
Update:
To clarify the problem and show that it's something with chrome and/or css, here are some steps to reproduce (in Chrome):
Select the first selector from above -> Ctrl+C
Hit RMB -> Inspect on any page (this stackoverflow-page for example)
Click on the small plus-icon in the top-right corner of DevTools
Ctrl+V, thus pasting in the selector
Hit tab: you can now add css properties.
Reproduce the above steps, except copy the second selector from above instead of the first.
This time when you hit tab, you couldn't start adding css properties but instead the selector (and thus style rule) just disappeared.
It doesn't disappear, but it's not a selector for an element, per se, it's a selector for an element's state, the :hover state. That's why when you put in the dev tools it looks like it's gone, but it's not; it is there you just need to activate the :hover state using dev tools, on the element you want to see the rules.
To do that right-click on the element whose state you want to change and select :hover
OP's comment:
If this were the cause, then both selectors would have the same
result, since both containing only :hover related selectors. Hitting
tab should let the user enter css that should be applicable to the
entered selector. However, the described behaviour is present.
That's because your last selector is a pseudo element ::before so you need to select it after selecting the :hover state.
Something like this (notice yellow bullet - meaning hover state selected):
If that doesn't work, it might be that your CSS selector doesn't match your DOM.
Please note: I found this question as well as this one, but both of their answers involve writing and executing customized JS. My question here is about how to wield Chrome Dev Tools (or similar) to accomplish the same thing in real-time.
I have a quasi-legacy JVM app that serves (and creates as part of its build pipeline) all sorts of nasty and messy CSS files.
I'm wondering if Chrome Dev Tools (or any other modern OSS webdev tool for that matter) has a "reverse engineering" feature in it that allows you to click on an HTML element and get a list of all the CSS rules that apply to it. And, not only that, but which rules are overriding other rules.
This way, when I need to tweak my CSS, it's less of a wild goose chase to figure out which rules are coming from which CSS files and that are actually being applied to the live element at runtime.
Any ideas?
Yes, in Chrome DevTools (F12 in Windows / Option+Cmd+I in OSX) within the Elements panel you can click on an element and see the applied CSS rules on the right-hand side. The overridden styles or classes are crossed out, and you can see the file name in which the CSS rule comes from. See below:
element.style refers to inline styles. For example, if I modified the selected element to be <div class="container" style="background-color:#000">...</div>, background-color:#000 will show up in the that section.
#content refers to the div element with the associated id of 'content'. The checkboxes that are checked on the right indicate that they have been applied with no overriding. You can check and uncheck these to play around with the styles so that you can see what you should change in your source code.
The html, body, div, span etc. allows multiple selectors to use the same styles. All the selectors in that comma-separated list will have the styles, except some may be overridden by other CSS rules - in this case, margin and padding are overridden by the more specific #content selector.
The next block is for user agent styles. These are styles that are applied by the browser, and each browser may apply different ones. This can be a problem if you have more specific rules defined yourself. Many people use normalizers to make sure things remain consistent among browsers. Check out Normalize
The inherited section shows all the styles that are inherited from parent styles. In this example, the text-align: left style was applied from the .container class as that is the parent element and the #content element didn't override it explicitly.
Update
Added better quality screenshot (thanks to #SLaks)
Added keyboard shortcuts for access (thanks to #NKD)
Added simple explanations of the sections of the Styles panel on the right.
Modern browsers have an "inspector" option that allow you to select a piece of generated HTML and view the CSS applied to it. Each one varies slightly, but normally hitting F12 will get you going.
I'm using Stylebot for Chrome to override some styling on a webpage I often visit. What I like to acheve is to hide elements in a list which contain links I already visited.
So i have a <tr> which has the class table-row and I want to hide all table-rows which contain a visited link (a:visited).
How can I do that?
You can't, not even with JavaScript. :visited is a special class that has privacy safe-guards bound to it. It won't return any elements in a DOM selector query. To do it with CSS, you would need the elusive ancestor selector, which doesn't currently exist. Even if it did, the same privacy safe-guards would probably prevent it from working.
See Selectors API, Privacy Considerations for mor information.
You can't hide or change the list elements containing a:visited, but you can change their color.
I have a same problem, then I changed all their color to background's color. It's here, but you can't see them.
I am using Firebug to inspect the elements of a webpage. On the right hand of the page there is a "style" tab that list all the CSS styling for a given tag. These CSS styling are coming from a linked CSS page.
What I am looking to do is somehow copy a set of divs with the CSS hardcoded in the div. This way I can copy and paste the elements and have the exact same styling. Is this possible to do with Firebug or perhaps another tool?
I used IE9 to accomplish this.
Open a page where you want to grab a style in IE9
Press F12 to display Developer Toolbar
In the Developer Toolbar press Find and select "Select element by click"
Then go to "View" > "Source" and select "Element source with style"
I don't know about Firebug, but you could build a script to do it.
List the CSS you want to copy (every property you believe is required to make it portable) and then loop through in JS and getComputedStyle(). Then build a ; delimited list of property:value pairs, and assign it to the style attribute if your element and all children.
This doesn't look like an easy task - and you will no doubt run into problems.
I'm not sure what exactly you're trying to do here but are you trying to apply the same style to multiple elements (divs)? If so you should use a css class. So your html will be
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
and css will be
.myClass
{
height:whatever;
width:whatever;
etc
}
I was wondering if anyone knew of a tool that will, when given a number of css files/css rules and a selector - classname, id, element etc. Return all styles that apply with their precedence ordered.
I not, is this doable via JavaScript - I can get the css rules applicable to an element at the time, but can I get those that have been overridden?
In Firebug you can see all qualified styles for any element. It lets you trace the precedence order, but requires you to use Firefox.
(The presentation image on the Firebug page actually shows this behavior. Note the font-size for the h1 selector has been overridden by the more specific .siteTitle class selector.)
Unless you are looking for something you can automate, Firebug should actually be able to solve this one for you. Bring up the context menu (right click) on an element on a pace, pick "Inspect element" and the Firebug pane appears. In the right hand side, you got all CSS rules relevant for the element - those that are overridden are marked with strike-through text:
(source: getfirebug.com)
Try any developer toolbar for Iexplorer or Firefox. Most of them will be able to show exactly what style will be applied to elements. I recon that for example Firebug (addin for Mozilla Firefox) can show what styles will be applied, and where they are overwritten by other styles. Good luck ;).
edit: IE Developer Toolbar also has this functionality.