Does Firebug / Web Developer Tools or any other extension have a function to show me all elements that have a given CSS class attached / applied?
So when I select a CSS class from the source (lets say, in Firebug), I would like to see all elements that have this class applied.
Are you looking for this: https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorAll ?
Basically you may find elements matching a certain selector like this: document.querySelectorAll('.firstclass.secondclass')
There are two native DOM functions you can use to achieve this:
document.getElementsByClassName()
document.querySelectorAll()
Both are supported by all major browsers for quite some time now.
Examples:
document.getElementsByClassName("firstClass secondClass")
document.querySelectorAll(".firstClass.secondClass")
Related
I have received a component library. I have to use its CSS for the relevant components in our webb-app. I go to "checkbox". I right-click on it and choose "copy as CSS". The CSS for all the states of a checkbox is then copied. But it is just the CSS declarations with their properties and values. The CSS selectors are missing. Is there any way to also get the CSS selectors from Sigma?
As far as my experience, I usually type selector manually because most elements have a different class name or id than what's in the design. If you want it to work automatically, I think you can use plugin to convert from Figma to HTML. You can find them here https://www.figma.com/community/search?resource_type=plugins&sort_by=popular&query=figma+to+html&editor_type=all
I'm trying to select <a> elements that are not the parents of <img> elements. (Note: if it's relevant some of the anchors I want to select are childless.) I tried this:
a > :not(img) {}
and this:
a:not(> img) {}
but neither of them seem to work. How would I accomplish this in CSS?
There is a spec, currently in draft, for a :has() pseudo-class. No browser supports it yet. If the spec is someday approved and implemented, you'd be able to do this:
a:not(:has(img)) {
// Styles
}
The MDN page says that :has would never work in stylesheets, only in JavaScript; but in saying that, it links to a section of the spec about a "dynamic selector profile" that apparently no longer exists.
I think the browser vendors typically have a problem with implementing CSS features that require knowledge of the DOM that only exists after the selected element is created, so I don't know if we should get our hopes up for this. Someone who follows the mailing lists or is generally smarter than me might offer a better prognosis.
Unfortunately, no. You'd need to use jQuery.
You could do some kind of workaround using CSS:
Assign a class to links that do not have child elements that are images and use that class to style the links as normal (e.g. a.class{color: red})
Assign a class to links that do have an image child element, and use a:not(.class){} to change their color
Reason: There is no parent selector in CSS. See:
Is there a CSS parent selector?, CSS Parent/Ancestor Selector
considering I have a single css file for my entire website (and that doing so is an usual technique), I was wondering if there is a way to select website-wide attributes like body (or any other attribute in fact) according to the current page using only css.
Something like
body:in('index.html') {
some properties;
}
body:in('contact.html') {
other properties;
}
Again, css only. I know the simple solutions using things like php, js, jquery...
Selectors have no information about the document beyond what is presented in the DOM tree, and the DOM does not expose information about the page according to its file name, URL, or any other such properties.
Historically there was a #document at-rule for querying the current URL, but it was removed from the Conditional Rules Level 3 module. The most likely reason for this is the lack of cross-vendor implementations, as the only known implementation exists in Gecko, as #-moz-document. It's so bad, that the only uses for it that you'll spot in the wild are not to apply CSS based on a certain page, but solely as a CSS hack for Firefox.
As you've stated, the simplest workaround for this is to have each page apply a unique class to the html or body element and select according to that class, whether via hardcoding, or dynamically.
you could add and id atribute to the body tag and style things inside it using:
body#contact div{
background:#376;
color:#857;
/*etc*/
}
more information about selectors in http://www.w3.org/TR/css3-selectors/
I have a GWT code that creates a list (grid as result) and I set the style to a CSS class like
.test tr {
height: 26px;
}
now...if from code I need to obtain that "26px" when the render isn't completed or when the grid has no element? ho can I obtain that value? I know i can do
obj.getElement().getStyle().getProperty("height");
to obtain some style attribute but how can I obtain the sub-element tr related value?
As you've discovered, the element's style property only contains styles that are directly set on the element itself - it does not automatically pick up css that has applied to it, or css that has been applied to parent nodes and inherited to it, etc.
To do this, you need to get the 'computed' style of the element. This is a somewhat expensive operation so should be done carefully, and will not work in older versions of IE, so different code entirely must be written. Some libraries like GXT have a built-in feature to do this work for you (XElement.getComputedStyle(...)), if you are not using a library like that, you will need to write JSNI that can call into this api and ask for these details.
Check out http://caniuse.com/#feat=getcomputedstyle (IE8 and below do not have it, old Android Browser and Opera Mini apparently have issues), and https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle for the details on the call. In your JSNI, remember to use $wnd to refer to the window object, something like this:
$wnd.getComputedStyle(element).getPropertyValue('height');
There is no need to get that value programmatically. I imagine that you have only one or two styles that define your tables, so you can always infer the row height from your style name. For example, if you have "standard" height set at 26px and have a "big-table" style setting it at 36px, you can simply:
int rowHeight = myTable.getStyleName().contains("big-table") ? 36 : 26;
I have a problem with css selectors, I have 2 buttons rendered into HTML by a external javascript, and the buttons are at the bottom and at the top of my page.
So if I customize CSS with mutual class name one button looks fine but the other does not, so here is my idea:
select the first button of a xclassname and give it some CSS
do nothing to the other button leave its CSS as it is how can I do that
Here is how I failed to do it with CSS:
.xclassname:nth-child(1) {
⋮ declarations
}
Nothing happened, can anyone think of something that will work? btw, I use Prototype, not jQuery
That's a CSS3 selector. Are you using IE? Because that selector isn't goint to work there at all. It should work in Chrome, Safari, or a later version of Firefox.
The workaround that I would use would be to use JQuery to perform this operation instead. Use the nth-child() selector in JQuery to add a class which has the style declaration you want. It's a bummer that IE is so behind the times, but that's why it's the bane of the existence of every web developer around...
The accepted answer is wrong. The Prototype docs actually provide an nth child example and the OP actually mentions that he uses Prototype so he doesn't need to worry about IE.
This is the nth child example provided in the docs:
$$('table tbody > tr:nth-child(even)');
Given what you're trying to do though you could target the element like this:
$$('.xclassname').first().setStyle({
// some style here
});