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/
Related
I think I tried everything and :after simply doesn't want to work with images. Is there any CSS limitation that I'm not aware of? Or did I do something wrong?
Here's the example:
http://jsfiddle.net/vHMRk/
Most browsers don't support :after and :before for img tags: http://lildude.co.uk/after-css-property-for-img-tag
The effect of :after on img is vaguely defined. The spec puts it this way: “Note: Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” In practice, it’s unspecified, and there does not seem to be any progress in this are in CSS3 drafts.
Is there any functional difference between the CSS 2.1 :after and the CSS 3 ::after pseudo-selectors (other than ::after not being supported in older browsers)? Is there any practical reason to use the newer specification?
It's pseudo-class vs pseudo-element distinction.
Except for ::first-line, ::first-letter, ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo-elements require double colons.
Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>'s in a div, for example.
(And also states of actual elements like :hover and :focus.)
Pseudo-elements target a sub-part of an element like ::first-line or ::first-letter, things that aren't elements in their own right.
Actually, better description here: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Also here: http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/
CSS Selectors like ::after are some virtual elements not available as a explicit element in DOM tree. They are called "Pseudo-Elements" and are used to insert some content before/after an element (eg: ::before, ::after) or, select some part of an element (eg: ::first-letter). Currently there is only 5 standard pseudo elements: after, before, first-letter, first-line, selection.
On the other hand, there are other types of selectors called "Pseudo-Classes" which are used to define a special state of an element (like as :hover, :focus, :nth-child(n)). These will select whole of an existing element in DOM. Pseudo classes are a long list with more than 30 items.
Initially (in CSS2 and CSS1), The single-colon syntax was used for both pseudo-classes and pseudo-elements. But, in CSS3 the :: syntax replaced the : notation for pseudo-elements to better distinguish of them.
For backward compatibility, the old single-colon syntax is acceptable for pseudo-elements like as :after (browsers still all support the old syntax with one semicolon). Only IE-8 doesn’t support the new syntax (use single-colon if you want to support IE8).
I just saw a CSS code that included ::before tag. I looked at MDN to see what the ::before is but I really didn't understand it.
Can someone explain how it works?
Does it make a DOM element before what we select by CSS?
According to those docs, they are equivalent:
element:before { style properties } /* CSS2 syntax */
element::before { style properties } /* CSS3 syntax */
The only difference is that the double colon is used in CSS3, whereas the single colon is the legacy version.
Reasoning:
The ::before notation was introduced in CSS 3 in order to establish a
discrimination between pseudo-classes and pseudo-elements. Browsers
also accept the notation :before introduced in CSS 2.
This distinguishes pseudo elements from pseudo classes.
The difference between pseudo classes and pseudo elements is described at http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
They essentially mean the same thing. The :: was introduced in CSS3 to help descriminate between pseudo elements (like :before and :after) and pseudo classes (like :link and :hover).
I checked out MDN and w3.org, and the best I could come up with is that :: is used for structural changes, and : is used for styling.
They are currently interchangeable for compatibility reasons.
It appears to separate :link (for instance), which styles a <a>, from :before (which is a structural change).
: is for styling, :: is for structure.
One is the CSS2 (:before) way and the other is CSS3 (::before). Currently they are interchangeable in browsers that support CSS2 & CSS3.
Here's a good explanation: http://www.impressivewebs.com/before-after-css3/
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.
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.