it is possibile to combine the pseudo-element :first-line and :before? Actually I'd like to have a character before any line of a p except the first one. I try:
p:first-line:before{content:""}
p:before{content:"["}
but it do not work.
Thank you for any suggestion.
It's not currently possible to chain them as you have, nor can I think of a way to append content to every line of a paragraph except the first with just CSS. Further, the content property is only used with :before and :after.
See the section "Multiple Pseudo-elements" on http://www.w3schools.com/css/css_pseudo_elements.asp to see how you can effectively combine pseudo elements:
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
p:first-line {
color:#0000ff;
font-variant:small-caps;
}
It is not possible to have two pseudo-elements in succession; both the CSS 2.1 syntax and the CSS3 syntax for selectors forbid that.
The W3C CSS Validator does not report p:first-line:before as an error, but this is a bug; I re-opened a bug report on this. (The bug is not triggered if the two-colon syntax p::first-line::before is used: the validator says “The pseudo-element ::first-line can't appear here in the context css21 [first-line::before]”.)
It would not help in this case even if the construct were valid and supported. Using :before on :first-line would be pointless, since inserting content at the start of the first line would be the same as inserting it at the start of the element.
And p:before means a pseudo-element at the start of the content of p, not at the start of each rendered line of p. It is not possible to insert a character at the start of each line of an element using CSS.
Related
I have code like this:
.module::first-letter{
visibility:hidden;
}
But this solution is not working on Firefox:(
Display:none; not working with "::first-letter" CSS code :(
How can I hide first letter in Firefox?
you can always try setting font-size:0 while this is not fully supported.
.module::first-letter{
font-size:0
}
<div class="module">Hide Letter H </div>
or as last resort color:transparent
.module::first-letter {
color: transparent
}
<div class="module">Hide Letter H</div>
Note the difference between both, 1st removes the letter space, second
one doesn't.
Note: The following properties can be used with ::first-letter:
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear
http://www.w3schools.com/cssref/sel_firstletter.asp
Another note, it only works with block level elements, I am not sure, and I could be wrong, you can hide the first letter with only CSS. Quite easy in JS to pull off.
As mentioned in the other answers the properties that can are used is limited but it's possible other browser vendors are initiating greater support
As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.
Source: MDN
Because of a bug in webkit browsers, you can't use attribute and :before/:after classes by default.
The fix doesn't seem to have any effect when using nth-last-of-type selector.
Here's what I'm doing:
.left[class^='col']:nth-last-of-type{
margin-right: 0 !important;
}
Just wanted to check and see if I'm not overlooking something simple.
Your :nth-last-of-type syntax is a bit off — it's either :last-of-type or functional :nth-last-of-type() with a formula an+b as an argument.
The pseudo-classes pertaining to "type" refer to the element type, represented by its tag name. It does not mean "the last element matching the rest of this selector".
If, for example, the last element matching .left[class^='col'] is not the last span element, then :last-of-type will not match. You'll have to modify your HTML to either segregate those span elements from others, or add a class to the last such element, before you can target it with a selector.
WebKit does not have any issues with pseudo-classes and attribute selectors that I'm aware of (or if it did, those issues have long been fixed). It does have issues with pseudo-elements, which I address here, where the fiddle link originates.
HTML:
<p>Hover</p>
CSS:
p::after {
content: " here";
transition: all 1s;
}
p:hover::after {
font-size: 200%;
color: red;
}
Live demo: http://jsfiddle.net/SPHzj/13/ (works in Firefox and Chrome)
As you can see, I've set up CSS transitions on the ::after pseudo-element of the paragraph. Then, when the paragraph is hovered, two new styles apply for the pseudo-element which are transitioned.
This works in Firefox and Chrome, but not in IE10. My reasoning was that IE doesn't understand the p:hover::after selector, as it works in IE if you set the hover on an ancestor element, e.g. div:hover p::after - live demo: http://jsfiddle.net/SPHzj/14/.
However, this is not the case, as IE is indeed able to understand that selector. The trick is to define a p:hover {} rule as well. (Discovered by #maxw3st.)
p:hover {}
This rule can be empty. The mere presence of this rule will make the transitioning work in IE10.
Live demo: http://jsfiddle.net/SPHzj/15/ (also works in IE10)
What's going on here? Why does IE require that rule to be present in order for transitions to work on the pseudo-element? Should this be considered a bug?
Appears to be a Regression
This does appear to be a legitimate regression in Internet Explorer 10. As indicated on MSDN, since Internet Explorer 7 users have been able to target the hover state of any element , and not only a.
Curiously I tried the :active pseudo-class, and this appears to work as expected. Further establishing that this is a regression, you can see that by changing this to an a element, the transition takes place as expected (since historically, a and :hover go hand-in-hand).
Optional Work-Arounds
There are only a few solutions that I can think of at this point (while waiting for this to be fixed):
Use the empty p:hover {} fix.
Modify your markup to target ::after on a child of the p.
Modify the selector to use combinators.
The first item is that which you specified in your question, and is very attractive given its simplicity. In fact, you could use :hover{} and get the same results (probably the best solution).
The second item is also do-able, but a little less desirable since it requires modifying the markup, which is not always possible, and to be frank, a bit silly.
The last option is somewhat interesting. If you modify the selector to be based on sibling relationships, it magically begins to work again. For instance, suppose we have multiple elements in the body:
<h1>Hello, World</h1>
<p>This is my first paragraph. it does not animate.</p>
<p>This animates, with a pseudo-element.</p>
We can now use combinators to target the second paragraph:
p+p:hover::after {}
This selector will match any paragraph following a paragraph though, which isn't desirable. At this point we could consider :nth-child, or :nth-of-type to further specify which paragraph we want, even using the general sibling combinator:
h1~p:nth-of-type(2):hover::after {} /* Targets second <p> nearest <h1> */
But more ideally we would target with a class:
h1~.hoverme:hover::after {} /* Targets <p class="hoverme"> */
A Two-Char Solution?
One step further, maybe you don't want to be locked down explicitly providing a general sibling tag. You could also use the Universal Selector:
*~.hoverme:hover::after {} /* Targets <p class="hoverme"> among siblings */
This requires that the p tag have siblings, which is typically expected. Very rarely does a document consist of nothing more than a single paragraph tag.
I understand that these aren't ideal, but they are a means to an end for now. Let's hope to see this resolved in future releases of Internet Explorer.
Strangely, the effect will work on a <a> link rather than a paragraph tag.
It certainly appears to be an IE10 bug or regression. Fortunately, you've found a nice fix.
This same phenomenon popped up when I tried adding a rule to change the cursor to a pointer. However, cursor: pointer; has to be included in the pseudo's parent, it can't be used to target just the pseudo's content string in IE10.
http://jsfiddle.net/maxw3st/SPHzj/22/ uses a div as a container, http://jsfiddle.net/maxw3st/7sBVC/ uses the p:hover workaround. Adding the div was suggested by #simevidas, and works fine for the transition, just not the pointer. The pointer only seems to appear in IE10 when it is applied to the parent of the pseudo-element.
is it possible to pick out and style a particular word in a paragraph using just css? So for example in the sentence "hello my name is nick, hello to you all", would it be possible to target the word "hello" wherever it appears and to add a rule, such as changing the color of hello anytime it appears? I don't want to have to add a span tag around every hello that appears.
I would like to do this in only css if possible. css3 is fine to use.
CSS has 2* Pseudo-Elements:
::first-line and ::first-letter. These are the only possibilities to target only a part of the innerhtml of a Tag.
(*ofc it has more, i mean for the purpose of selecting only a part of the innerhtml.)
No, you'd need to use javascript for that. Or, if you're using PHP/ASP...etc, you could add spans around any designated word(s) automatically before the page renders.
If you know the contents of the para and have patience you can wrap each of those words that you need to highlight in a span tag. Assign them the same class and then style it.
For fine control over any particular word, or fragment, you'd have to wrap it into a span and style the span, as others said.
However, there are also the :first-line and :first-letter pseudo-elements, available since CSS2. So, for example, you can have the first letter have a different font-size, and the whole first line have a different color, like this:
p:first-letter {font-size: 30px;}
p:first-line {color: #FF0000;}
What I know its not possible to target textnode, you can do it by using Javascript. Wrap the Hello word with a span tag and set the properties to the SPAN tag
CSS selectors work on tags or pseudo clases, not querying your text. Check the reference http://www.w3.org/TR/selectors/, maybe you can find something useful here.
I'm trying to style a word with a big first letter and spacing for the other letters. My current solution is pretty ugly: see here (and a malfunctioning jsfiddle here).
Ideally, instead of something ugly like this: <dropcap>T</dropcap><span style="letter-spacing:.2em;">HERE</span><span style="margin-left:-.2em;"> is</span> nothing more unreasonable...
I could have something sensible like this: <dropcap>THERE</dropcap> is nothing more unreasonable...
Any ideas? Thanks.
You could just use the :first-letter pseudo-element.
The :first-letter pseudo-element is
mainly used for creating common
typographical effects like drop caps.
This pseudo-element represents the
first character of the first formatted
line of text in a block-level element,
an inline block, a table caption, a
table cell, or a list item.
It's supported in IE8+ and all modern browsers.
For example: http://jsfiddle.net/HTnBP/4/
For the other half of your question, try:
T<span>HERE</span>
div > span:first-child {
letter-spacing: .2em;
margin-right: -.2em
}
http://jsfiddle.net/HTnBP/5/
I don't really see the point in using a custom dropcap element. Unless you don't mind adding extra complexity to support IE8 and lower, or you simply don't care about those browsers.
Or maybe you can use this JS solution i found
http://webplatform.adobe.com/dropcap.js/