On Firebug, when inspecting an element, is there a way to Auto-complete CSS property names for rule sets similarly to ctr+alt+space in some IDE for other languages?
No, it is not possible. But you can double click inside the class rules and start typing a CSS property name - Firebug will give you suggestions/autocompletion
Related
I have been going through http://support.worldpay.com/support/kb/gg/paymentpagedesigner/content/manageassets.htm#Font in order to try and change the format of texts in Payment form to Upper Camel-Case(text-transform: capitalize). So I modified the css properties for specific elements and uploaded the FLPI_Worldpay_Test_public.css file as mentioned in https://www.youtube.com/watch?time_continue=294&v=xrrn1stqKAA
But its not working, is it by any chance text-transform property is not supported by them ?
For any CSS style property value to be accepted for rendering an element, it is important that it is the last change made to style property. In other words, your CSS might be getting overridden by another CSS file.
You can check if your results are present or not through the console.
This is also how you could experiment with CSS properties.
Also, you can use text-transform: capitalize !important; to enforce a style.
Below is the HTML snippet of the textbox that i am trying to identify using chromdriver
You could use the following Xpath:
//input[#placeholder="Scan Serial No"]
ry using multiple attributes
//input[#placeholder="Scan Serial No"][contains(#class,'FC2 ELX_UserPrompt')]
For getting selectors there are a few techniques I use.
First I use the built in tools of the Chrome Developer Tools. Open these with ctr+shift+i. Then locate the element you want, ctrl+shift+c then click on the element. This highlights the element you want in the Elements tab. right click on the highlighted element and choose Copy>Copy selector. This will give you a unique css selector for that item. This works well for everything except dynamic elements that have changing id's or locations on the page.
For dynamic elements I use advanced css selectors. where you can leverage the html tag in addition to any css attributes to locate the element. Here is a decent write up on how to use these https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/#comments
For you particular element you could do something like input[placeholder='Scan Serial No']
You can use following xpath:
name of class in xpath
//input[#class='FC2 ELX_UserPrompt binding_Screen_cc607e87_a82b_4cac_8c38_939be2ba00ff_SerialNo??']
name of class and placeholder
//input[#class='FC2 ELX_UserPrompt binding_Screen_cc607e87_a82b_4cac_8c38_939be2ba00ff_SerialNo??'][#placeholder='Scan Serial No']
What is the CSS selector equivalent of XPath "//a[contains(text(),'Next ยป')]"?
Thanks
You cannot find text with CSS directly, you could set CSS properties via JavaScript based on the internal contents but in the end you would still need to be operating in the definitions of CSS.
I would like to select an element on its style element. For example, my current WYSIWYG editor puts style attributes to align images, like so:
<img src="my_image.png" style="align: left;" />
Selectors I've tried:
img[style*='align: left']
img[style*='align:left']
img[style*='eft']
All these work fine in all browsers except IE7.
I think it's not possible: according to sitepoint
In Internet Explorer 7: The style attribute can't be used in attribute
selectors.
so basically the only way to target that element on IE<7 is probably using javascript
Doing a bit of research online yielded the fact that IE7 does not recognize (even CSS2) attribute selection for the style element.
If there is a way to configure your WYSIWYG to apply a class to those elements being aligned (and perhaps doing the alignment by that), then IE7 will recognize img[class~=yourClassName] as an attribute selector. But then, it is quite likely you would just apply your style through the class itself: img.yourClassName and skip the whole attribute selection.
Otherwise, use javascript.
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.