Having trouble with attribute != selector - html

The question is simple, the answer maybe not.
I'm trying to apply several styles to all input elements without an specific id. I use this selector in my CSS stylesheet: input[id!='move'] but unfortunately it's not working either in IE10 or in Chrome.
The curious thing is that this block: input:not(#move) works perfectly in both.
I'm lost because the first block of code is supposed to work as far as I understand how these kind of selectors work.
Any ideas?

That is a non-standard attribute selector invented by jQuery. It's not part of the Selectors specification, so it won't work anywhere outside of jQuery (this includes things like document.querySelectorAll()).
Strictly speaking, the direct equivalent of jQuery's input[id!='move'] in standard selector syntax is input:not([id='move']), with an attribute selector. But since you're looking to match elements without a specific ID, input:not(#move) is fine.

Related

Is it possible to select elements that do not have a child of a certain type?

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

Can't use children with :not pseudo selector

I'm having trouble using some relatively simple CSS selectors using :not. Namely, the following selector is giving me an error:
a:not(.ebook_document *)
I am trying to get all <a> elements that are not children of the element with class ebook_document. This also fails:
a:not(.ebook_document > *)
As well as this:
a:not(.ebook_document, *)
Putting the selectors on their own, not in a :not section works fine. What have I done wrong?
:not only takes a simple selector. (For now, CSS 4 expands that to a selector list.)
Plus, https://developer.mozilla.org/en/docs/Web/CSS/:not -
This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, body :not(table) a will still apply to links inside of a table, since will match with the :not() part of the selector."
What you want is not possible using :not.
You can only go about it the other way around - format all "normal" links, and then apply different formatting for the links inside the target element(s) using .ebook_document a { ... }
So that means rather than not applying styles to those links in the first place, you might need to overwrite the styles you don't like for those links again.
(Or use initial/all to actually reset styles, but browser support for that is still lacking AFAIK.)
Hmm shouldn't it just be a:not(.ebook_document)? I didn't test it but it seems that that should reference all the a tags that don't have a .ebook_document tag.

Is it possible to select an element's attribute with a CSS selector?

I'm looking for a way to use a pure CSS selector (not script) to select an element's attribute, not the element itself. I know XPath can do it but can a CSS selector?
Example, given:
<img alt="image" src="photo.jpg">
Can I get to the src attribute with a CSS selector?
Update:
I don't want to set any element's values, I just want to select the text "photo.jpg".
Because CSS selectors originated as a fundamental part of CSS, and CSS can only apply styles to elements (since attributes are just element metadata, not standalone objects), CSS selectors cannot match attributes alone within CSS.
But I suspect you're not actually asking about CSS here. You're asking about selectors alone. You're probably using a web automation tool such as Selenium or one of the numerous HTML parsing libraries out there that support either CSS selectors or XPath. Some of these libraries support non-element selectors in the form of pseudo-elements such as ::attr() (I don't remember which ones), you haven't mentioned which tool you're using so I can't tell you for sure if you could use it. Note that this is not the same thing as the CSS attr() function mentioned in the comments — that is a CSS function, which is a value, not a selector, and therefore it cannot be used in a selector.
But if your library doesn't have such a feature then you'll need to either select the img element directly and query its src attribute separately (again, how you do this depends entirely on what you're using, which is why it helps to be specific about this sort of thing), or use XPath if possible.
CSS Tricks has an article that I believe answers your question:
https://css-tricks.com/almanac/selectors/a/attribute/
If you are trying to set the value of a certain element attribute using css, I'm pretty certain that is impossible for anything other than the content property.
CSS is not a programming language and can't process data.
Its sole purpose it to tell the browser how a certain element should look like, like in coloring a text red.
To process data in a web page you use javascript, which can make use of CSS rules though, to grab a certain type of elements in a web page, for example this, which will return a list of all elements of type img
var imglist = document.querySelectorAll('img');
Now, having a list you can loop through it and get each src like this
Array.prototype.slice.call(document.querySelectorAll("img")).forEach(function(img) {
var imgsrc = img.src;
// imgsrc now holds the image url, in your case "photo.jpg"
});

How to add style for last visible element without JS

This selector doesn't work. Is it really possible?
See this http://jsfiddle.net/Hd7VZ/
.x-form-fieldset:last-child:not(x-item-hidden) {
border-bottom: 0;
}
One of solution is this http://jsfiddle.net/8Fpyu/
The comment by antejan is correct, currently you're selecting the .x-form-fieldset which is :last-child in its block. If you want to select the :last-child within .x-form-fieldset then this is the correct syntax:
.x-form-fieldset :last-child {
border-bottom: 0;
}
However even if the last item is hidden it is still :last-child, so adding the :not will achieve nothing in your example.
There is nothing in CSS at present which allows you to ignore non-visible elements, as you can see from this small modification of your example simple effects like alternate striping are also broken by hiding elements. This may be a worthwhile addition to a future version of CSS, you could try suggesting it to the W3C CSS Working Group and seeing if they think it'd be worth adding to a future version of the selectors spec (CSS Selectors Level 4 is going through the standards process right now, but ideas are being accepted for CSS5 Selectors).
In the meantime, you're stuck with either finding an alternative markup approach, or hacking it in JavaScript.
It looks like you have a syntax error, add a '.' if it's a class or '#' if it's an id before x-item-hidden.
.x-form-fieldset:last-child:not(.x-item-hidden) | .x-form-fieldset:last-child:not(#x-item-hidden)

CSS nth child selector

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
});