I am wondering if there are any other selectors which select only part of an HTML element. I know of these two:
:first-letter
:first-line
But AFAIK there are no other selectors which do this. I am interested in any (even browser-specific) selectors or other methods of manipulating only part of a block of text.
The Use Case
I have (more) control over the .css and .js than over the DOM. I've been using js workarounds but want to include any CSS solutions as well, because I don't like to depend of javascript for my styles.
Even if the solution is only supported in konquerer it is still better than nothing IMO.
Nope, those are the only two content pseudo-elements available that select real text nodes. Nothing new has made it into the CSS3 recommendation.
One of the proposals that didn't make it was ::selection (roughly implemented by Opera, Safari and Chrome, and by Firefox as ::moz-selection), but your use case doesn't really say anything about what you want to do so I have no idea if that selector is relevant to your needs.
I'm not aware of any browser-specific pseudo-elements, but there are also the ::before and ::after pseudo-elements. See the CSS 2.1 specification from the W3C.
Related
I'm new to CSS, and I was wondering, is there another way to write an equivalent to pseudo class :link , in case :link is not supported?
Theoretically, in selectors-4 you can write :any-link:not(:visited), but you are going to be hard-pressed to find any browsers that support :visited but not :link, let alone :any-link, browser regressions notwithstanding.
A slightly more widely-supported selector requires knowledge of the document language since the link pseudo-classes themselves match different elements based on document semantics. In HTML, :link can be expressed as the following level 3 selector-list:
a[href]:not(:visited), area[href]:not(:visited), link[href]:not(:visited)
The same caveat applies.
If you're asking about browsers that support neither of the link pseudo-classes, remove the :not(:visited) from the above selector-list. If you're asking how to match links based on their visitedness in browsers that support neither pseudo-class, then it becomes impossible. But there are no known browsers that lack support for the link pseudo-classes, so this will never be a problem if you're making websites.
Note that CSS1 and CSS2.1 define :link and :visited to apply only to a elements — the standalone Selectors standard (level 3 and up) instead defers to the document language, and in the case of HTML, the current definition above is provided by HTML5. What this means in theory is that browsers up to and including IE6 (not sure about IE7) don't support the link pseudo-classes on elements other than a[href], and that's because IE6 was designed to be CSS1-compliant, not CSS2-compliant.
What this means in practice depends on whether or not you use the link pseudo-classes to match area or link elements, and whether or not you support browsers dating back to IE7, in the first place. If you're like 99.9% of authors who don't use them with area or link elements, then this means absolutely nothing to you in practice.
The a {} selector ({} added since it's so short) will apply to all pseudo classes though a:link will override specific styling for URLs the user has not yet visited.
Someone mentioned an exceptionally old version of Internet Explorer. If you're new to CSS you should first concentrate on current browsers. If you're learning at this point the oldest version of IE that you'll be supporting is IE11 if working with CSS will become a part of your future career.
I'm working with css and I have tried to add an element 'before' to my div like an arrow. Is there any way to achieve it? I tried pseudo :before but there are three of them (::before(2), :before and ::before). They make me so confuse, what are differences in between?
The CSS spec on content describes all three syntaxes.
:before -- outdated syntax for pseudo elements. Use if older browser support is needed such as IE8. IE9 supports the new syntax. It also seems like iOS Safari does not support the new syntax
::before -- new pseudo element syntax. This is equivalent to ::before(1)
::before(n) -- used to create multiple before elements that can be before other ::befores. Details are in the same spec.
As far as I can tell, no browser supports this.
http://jsfiddle.net/535Rf/
I need to ensure IE7 and IE8 support.
I'm using a few CSS3 selectors like :last-child. I dropped in Selectivizr, and it appears to fix many problems in those browsers, leaving me just a handful to clean up with some fallback code.
But HTML5 Please recommends using only fallbacks, not polyfills, to address CSS3 selector support:
We strongly recommend you do not try to polyfill this, but if you do need one, you can use Selectivizr.
It would be good to know why they "strongly recommend" against polyfills here... Anyone have any ideas?
Using a fallback I think means you should be adding classes to the elements that you cannot select with modern selectors like adding .first to be used for :first-child, or .checked for :checked, and so on.
I can't think of any reason HTML5 Please recommends not to use polyfills so strongly, except for performance and independence from JavaScript. It's best to depend solely on CSS to style and draw.
But in my humble opinion, Selectivizr is a piece of magic that will teach IE6-8 to behave and ensure your HTML is clean from unnecessary classes and will shorten your development time.
Can any CSS3 experts tell me the best strategy for handling the before and after pseudo elements with IE6 and IE7?
If you use jQuery it is a simple one-liner. Just use prepend() and inject a span with a class .before (for the simplicity of changing the CSS). I've made a fiddle for you.
I write a small script for old IE to add special elements in DOM. (Via IE conditional comments.) The rest of common browsers get this by pure CSS. The downside is I have to write the code twice. The upside, I have IE only code in one place.
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.