I would like to change the first letter of an h2 tag thats NOT in a span in the following chunk of code
<h2>
<span class="subtleHeader">Saskatoon, Regina and Edmonton's</span><br>
WEB DESIGN EXPERTS
</h2>
So in this example I want to change the W. yes I can change the dom, but I'm very very lazy and have this DOM structure in many places and was wondering if there was a css way to do it.
Nope, not with CSS alone. :first-letter will only pick up the very first letter (and any punctuation marks), and you can't select or apply pseudo-elements to DOM text nodes with CSS.
You'll have to wrap that title in its own span, then select the :first-letter of that second span.
No. CSS applies to elements, not to text. If you still wish to edit text only, you'll need a language that is able to work with strings, such as Javascript or PHP.
Or use the selector #BoltClock suggested.
I'd do that.
Related
I've been using Font Awesome for a while and I wonder one thing which tag should I use for it.
Here is said that they like the <i> tag for brevity, but using a <span> is more semantically correct.
I read specification for <i> and <span>. Unfortunately, I can't find the difference, they're both have the same context in which they can be used.
The difference between <span> and <i> is that <i> was originally intended for italics font, while <span> is intended to encapsulate a piece of content without changing any css rules immediately. In other words, <span> can be used for any custom css action you want to apply.
Therefore, from a theoretical and historical perspective, <span> would be a more proper choice.
However, <i> is much shorter and the effect in the browser is identical, so choose <i> in order to optimize your page speed with a few microseconds, and your coding speed with a few seconds.
It is because <i> is for italic text in html and <span> can contain any inline element. Thus using span instead of i is more semantically correct. But still <span> is also not denoting for using icons in html, so this is also not more semantically correct until you add a role as img like this:
<span class="your_awesome_font_icon" role="img"></span>
I want to add text just with css.
But pseudo-elements are not option.
Point is to add text just with css, and have text in DOM.
Is that posssible ?
So this is not option :
.someClass:before {
content: "some text";
}
In general, the entire purpose of CSS is to preserve the distinction between style/design and content. The pseudo-selectors are a little unique in that they don't select actually existing content to "style" it, but rather create the content in the first place.
This doesn't exactly interfere with the purpose of CSS because the distinction between content and design can sometimes get a little fuzzy. Cf., for example, http://css-tricks.com/css-content/ which talks of how appending "E-mail: " before every email address can actually be a style decision.
That said, I really don't understand why you don't want to use pseudo-elements. Support is near ubiquitous (http://css-tricks.com/browser-support-pseudo-elements/). Your only other option would be to use JS/jQuery or good ol' HTML.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. (w3org)
You can not add any content without the use of :before or :after
In order to edit the DOM consider using jQuery or any other js script:
jQuery:
$('body').append('<div>Your new content</div>');
I've searched a lot, but still cant find a way to use CSS3 Selectors to style all words starting with a #... Like #diy. Shouldnt that be possible using css-only?
Selectors aren't designed for selecting text content directly in part or in full, so no, it shouldn't.
Selectors are designed for matching elements. If you want to style hashtags differently, you should be wrapping them in their own elements and then styling those elements.
No, but it can quite easily be done with JavaScript.
Using Extend jQuery.highlight to highlight regular expressions:
$('body').highlight(/\B#\w+/)
Working example: http://jsfiddle.net/kobi/ttd9r/
Due to mod rights on a site, I can only add css (no js etc...). When users input text in a comment box, it saves it and then displays it as a <p>. is there any way through css i can search for a specific word in the <p> tag and remove/censor it?
Thanks
There is no practical solution for that ( You may be able to select elements based on the value and hide them in CSS3 but it wouldn't be cross-browser friendly, if at all possible ). I'm afraid you'll have to use JS/server-side for a real solution.
On the hacky side of things and for IE only, you may be able to use an expression and display:none elements which contain certain strings in their nodeValue, it wouldn't work for modern browsers.
If parent element in this case input field has class or id you can hide elements inside like this
textarea#mytextarea p
display:none;
}
Once upon a time, there was a pseudo-class :contains() in the wonderful spec of CSS3 selectors ... but it disappeared early and afaik well before any implementation.
A JS solution has one problem: search bots and any user without JS (or displaying the source code) will see the f***ing original text :)
Sometimes, I found too many people like to insert a <span> tag in a <button> tag. Sometimes, they place two <span> tags. I want to know, why do they do this?
CSS is supposed to allow separation between content and style. Unluckily, when you need a complex design you often need to alter your HTML markup so you can apply the necessary CSS rules.
I've seen this with <div>. That's done for styling (double borders), but it's also done to handle IE bugs (box-border model bug).