pseudo-class

How can I indent starting from the second line of a paragraph? I've tried p { text-indent: 200px; } p:first-line { text-indent: 0; } and p { margin-left: 200px; } p:first-line { margin-left: 0; } and (with position:relative;) p { left: 200px; } p:first-line { left: 0; } Is it literally just the second line you want to indent, or is it from the second line (ie. a hanging indent )? If it is the latter, something along the lines of this JSFiddle would be appropriate. HTML <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna

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

I have: <span id="string">12h12m12s</span> and I'm looking to make the h , m and s smaller than the rest of the text. I've heard of the nth-letter pseudo element in css, but it doesn't seem to be working: #string:nth-letter(3), #string:nth-letter(6), #string:nth-letter(9) { font-size: 2em; } I know I could use javascript to parse the string and replace the letter with surrounding span tags and style the tags. However, the string is updated every second and it seems parsing that often would be ressource intensive. Performance-wise, I'd recommend a span hell. <span id="string"><span id="h">12<

a:hover Why is it called a "pseudo-class"? Are there any similarities with the concept of "class"? Rowland Shaw In CSS terms, a class is a selector that starts with a full stop, e.g. .foo { ... } It would be used in the form <div class="foo"> This use of "class" is more in the sense "a set or category of things having a common characteristic and differentiated from others by kind or quality", rather than borrowing from OO terminology. A pseudo class is "not quite a real one" as the user agent defines when and/or how much content qualifies (like :hover , :active , etc). It's pseudo because you

I was looking here at CSS :active Selector. The :active selector styles links to active pages That got me thinking, what the heck is an 'active page' in HTML/CSS terminology... At this point I went to the w3docs Section : 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus. The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. So I used one of the w3shools try it pages and hack together an example, substituting the following code, which you can just cut & paste and try.

I can't seem to find much information about this. Smashing Magazine seems to be saying that html and :root are the same thing but surely there must be a tiny difference? Felix Kling From the W3C wiki : The :root pseudo-class represents an element that is the root of the document. In HTML, this is always the HTML element. CSS is a general purpose styling language. It can be used with other document types, not only with HTML, it can be used with SVG for example. From the specification (emphasis mine): This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a

I am getting some problem in applying placeholder css. I am trying to apply css (i.e. color:#898F9C; ) on input-box placeholder using pseudo-class selector :-ms-input-placeholder , but it's not working in IE. Demo After some hit and try, I get solution of my problem, but it's amazing. If i removed the default css/style color on input-box, placeholder css working properly in IE(It's amazing behavior of Internet Explorer). My default css/style: #search { color:blue; } Working-fiddle without input-box default css My question is, why it's not working with default CSS in IE? David Storey Further to

I have some css menus on my site that expand with :hover (without js) This works in a semi-broken way on iDevices, for example a tap will activate the :hover rule and expand the menu, but then tapping elsewhere doesn't remove the :hover . Also if there is a link inside the element that is :hover 'ed, you have to tap twice to activate the link (first tap triggers :hover , second tap triggers link). I've been able to make things work nicely on iphone by binding the touchstart event. The problem is that sometimes mobile safari still chooses to trigger the :hover rule from the css instead of my