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.
Related
I'm trying to style a disabled input. I can use:
.myInput[disabled] { }
or
.myInput:disabled { }
Is the attribute selector the modern CSS3 way and the way to go forward? I used to use the pseudo-class, but I can't find any info on whether they are the old way and won't be supported or whether they're both equal and you can use whatever you like best.
I have no need to support older browsers (it's an intranet application), so is it:
attribute is newer and better
pseudo-class is still the way to go
whichever you like best
there's a technical reason to use one over the other
Is the attribute selector the modern CSS3 way and the way to go forward?
attribute is newer and better
No; actually, attribute selectors have been around since CSS2, and the disabled attribute itself has existed since HTML 4. As far as I know, the :disabled pseudo-class was introduced in Selectors 3, which makes the pseudo-class newer.
there's a technical reason to use one over the other
Yes, to some extent.
With an attribute selector, you're relying on the knowledge that the document you're styling makes use of a disabled attribute to indicate disabled fields. Theoretically, if you were styling something that wasn't HTML, disabled fields might not be represented using a disabled attribute, e.g. it might be enabled="false" or something like that. Even future editions of HTML could introduce new elements that make use of different attributes to represent enabled/disabled state; those elements wouldn't match the [disabled] attribute selector.
The :disabled pseudo-class decouples the selector from the document you're working with. The spec simply states that it targets elements that are disabled, and that whether an element is enabled, disabled, or neither, is defined by the document language instead:
What constitutes an enabled state, a disabled state, and a user interface element is language-dependent. In a typical document most elements will be neither :enabled nor :disabled.
In other words, when you use the pseudo-class, the UA automatically figures out which elements to match based on the document you're styling, so you don't have to tell it how. Conversely, the attribute selector would match any element with a disabled attribute, regardless of whether that element actually supports being enabled or disabled, such as div. If you're using one of the many modern frameworks that rely on such non-standard behavior, you may be better served by using the attribute selector.
In terms of the DOM, I believe setting the disabled property on a DOM element also modifies the HTML element's disabled attribute, which means there's no difference between either selector with DOM manipulation. I'm not sure if this is browser-dependent, but here's a fiddle that demonstrates it in the latest versions of all major browsers:
// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;
You're most likely going to be styling HTML, so none of this may make any difference to you, but if browser compatibility isn't an issue I would choose :enabled and :disabled over :not([disabled]) and [disabled] simply because the pseudo-classes carry semantics that the attribute selector does not. I'm a purist like that.
It turns out that Internet Explorer 10 and 11 fail to recognize the :disabled pseudoclass on some elements and only work fine with the attribute selector syntax.
#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }
<form>
<fieldset id="test1" disabled>:disabled</fieldset>
<fieldset id="test2" disabled>[disabled]</fieldset>
</form>
The code snipped above renders in IE like this:
As long as you're only styling input elements, you should be fine either way. Still it's a good advice to test the final result in all browsers you wish to support.
Apparently, you can only select and style input elements with ":(pseudoclass)" / ":disabled" , but other elements, such as DIVs, must instead use [disabled].
I often run into this issue when writing SCSS / SASS and try to select a disabled element.
See
CSS selector for disabled elements
I have a <a> tag and with a a:after{content:"(1)"} I can add a text (1) after it. But what if I want to set the color, font of the (1)? Is it possible?
Thanks,
You can use the color property to do so:
a:after{content:"(1)"; color:red;}
Working example:http://jsfiddle.net/f2z8ztvc/
Styling a pseudo-element in CSS is often no different than styling a regular element. The main difference is in the selector, and where the styles will be applied.
The spec describes which CSS properties apply to which pseudo-elements, but for the purposes of this question the :before and :after pseudo-elements behave exactly like their regular counterparts (interestingly, CSS2.1 mentions this explicitly, but Selectors 3 doesn't). So if you want to change the font of your :after pseudo-element, there is nothing stopping you from doing so.
I'm trying to style a disabled input. I can use:
.myInput[disabled] { }
or
.myInput:disabled { }
Is the attribute selector the modern CSS3 way and the way to go forward? I used to use the pseudo-class, but I can't find any info on whether they are the old way and won't be supported or whether they're both equal and you can use whatever you like best.
I have no need to support older browsers (it's an intranet application), so is it:
attribute is newer and better
pseudo-class is still the way to go
whichever you like best
there's a technical reason to use one over the other
Is the attribute selector the modern CSS3 way and the way to go forward?
attribute is newer and better
No; actually, attribute selectors have been around since CSS2, and the disabled attribute itself has existed since HTML 4. As far as I know, the :disabled pseudo-class was introduced in Selectors 3, which makes the pseudo-class newer.
there's a technical reason to use one over the other
Yes, to some extent.
With an attribute selector, you're relying on the knowledge that the document you're styling makes use of a disabled attribute to indicate disabled fields. Theoretically, if you were styling something that wasn't HTML, disabled fields might not be represented using a disabled attribute, e.g. it might be enabled="false" or something like that. Even future editions of HTML could introduce new elements that make use of different attributes to represent enabled/disabled state; those elements wouldn't match the [disabled] attribute selector.
The :disabled pseudo-class decouples the selector from the document you're working with. The spec simply states that it targets elements that are disabled, and that whether an element is enabled, disabled, or neither, is defined by the document language instead:
What constitutes an enabled state, a disabled state, and a user interface element is language-dependent. In a typical document most elements will be neither :enabled nor :disabled.
In other words, when you use the pseudo-class, the UA automatically figures out which elements to match based on the document you're styling, so you don't have to tell it how. Conversely, the attribute selector would match any element with a disabled attribute, regardless of whether that element actually supports being enabled or disabled, such as div. If you're using one of the many modern frameworks that rely on such non-standard behavior, you may be better served by using the attribute selector.
In terms of the DOM, I believe setting the disabled property on a DOM element also modifies the HTML element's disabled attribute, which means there's no difference between either selector with DOM manipulation. I'm not sure if this is browser-dependent, but here's a fiddle that demonstrates it in the latest versions of all major browsers:
// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;
You're most likely going to be styling HTML, so none of this may make any difference to you, but if browser compatibility isn't an issue I would choose :enabled and :disabled over :not([disabled]) and [disabled] simply because the pseudo-classes carry semantics that the attribute selector does not. I'm a purist like that.
It turns out that Internet Explorer 10 and 11 fail to recognize the :disabled pseudoclass on some elements and only work fine with the attribute selector syntax.
#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }
<form>
<fieldset id="test1" disabled>:disabled</fieldset>
<fieldset id="test2" disabled>[disabled]</fieldset>
</form>
The code snipped above renders in IE like this:
As long as you're only styling input elements, you should be fine either way. Still it's a good advice to test the final result in all browsers you wish to support.
Apparently, you can only select and style input elements with ":(pseudoclass)" / ":disabled" , but other elements, such as DIVs, must instead use [disabled].
I often run into this issue when writing SCSS / SASS and try to select a disabled element.
See
CSS selector for disabled elements
I try to use css locators over xpath when I can.
I have the following xpath locator that I would like to change to css:
//table[#id='service_schedule_sets']//a[text()='OptimalTest']
I would like to use a css locator. I wish to avoid using contains as there are support issues in later versions of css (i.e. contains was removed from css2 and css3 (css2 removal was a very last minute thing) that selenium covers up but I would like to avoid.
I am trying:
css=table#service_schedule_sets a[.='OptimalTest')
but it doesn't find the element.
The HTML is:
<td>
OptimalTest
</td>
Notes:
I want to use the text in the link ('OptimalTest') not the href.
I do not want to use link=OptimalTest approach as it is not specific enough.
CSS selectors do not support node selection based on their text content.
Actually there was a suggestion for a pseudo class :contains which would suit your needs, but it was removed from CSS 3 spec.
I was thinking of using these styles for easier cell rollover effects in a datagrid, but I can't seem to get these styles working on anything other than the most basic of tag.
Is the <a> anchor tag the only element in HTML to support styles like hover, active, visited?
It should work on all elements, but IE6 only supports in on links. I used whatever:hover to work around that.
Modern browsers support the pseudo style properties for all elements, IE6 is the only current wide-spread browser that doesn't (and that's only for the :hover property).
It is unfortunate but until IE6 usage drops below minimal levels, you should avoid using the :hover property on non-anchor elements for better cross-browser support. Alternatively, you can provide IE6 support for it using javascript (with browser detection) or CSS expressions.
According to the CSS2 specification:
CSS doesn't define which elements may be in the above states [:hover, :active, and :focus], or how the states are entered and left.
In other words, don't depend on them working at all. I would use Javascript, along with CSS, to get a wider audience.
PPK has a great reference for browser compatibility here: http://www.quirksmode.org/css/contents.html#t16
It shows the browsers that correctly support the :hover pseudoclass (and lots of other css selectors).
Yes unfortunately anchor is the only tag that supports these styles.
I would recommend the following:
Before coding any of your own JS, try use the JQuery framework, it might save you loads of work.
Another crazy workaround would be to expand the size of the using style to 100% of the parent (cell), this way you would effectively be applying the style to the cell.