We Keep Coding

How can I select text in an element that isn't inside another element? [duplicate]

I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?

The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.

Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>

This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.

I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!

I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.

I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.

Prevent text selection from exiting a div

I have a div that displays some text that the user might want to highlight to copy and paste or the like. While kicking the tires of that design, I noticed it was easy to end up selecting content beyond that div simply by dragging the mouse too far. I'd like to avoid this issue by preventing the selection from leaving the relevant div, but I haven't been able to find any way to do it.
One possible solution might be applying user-select:none (as described here) everywhere but that particular div, but that won't work in this case because there are other divs which need to have selectable text.
Conceivably jQuery could be used to change div styles so that user-select:none would apply to everything but the div you're selecting text in, but I feel like there has to be a simpler way to go about it, possibly even with just CSS.
Anyone know how to do this?
Edit: Josh C's answer below does the trick. Here's a JS fiddle fork of his solution, with the most important change in the fork being the addition of the disabled="disabled" attribute to the textarea. When selecting text within the textarea while using that attribute, no caret will appear in the text and the outline will not glow when focus is on the textarea. The only other thing to note is that you'll have to control textarea browser defaults if you want to obscure the fact that the text is in a textarea.

You could achieve this with jQuery, however, the easiest and most lightweight option I know of would just be to do what companies like Google have always done:
Place the text that is going to be highlighted inside an input or textarea box.
Demo here
<textarea>Text that will be highlighted here..</textarea>
If you want it to be somewhat hidden, set border:none;
textarea {
border:none;
width:400px
resize:none;
}
If you want to embed maps from Google, Youtube videos, or a facebook feed, all these companies use this approach. I'm pretty sure this is your best option.
If you want the text to be auto selected on click, use some JS like:
function SelectAll(id) {
document.getElementById(id).focus();
document.getElementById(id).select();
}

Seems like you might want to be able to click on this div and copy it's text contents to your clipboard.
Here is a stackOverflow about copying to clipboard.
The best explanation was here.

I just wanted to include my snippet here.
My focus was on making sure that I could display header and paragraph text without the text area styles bleeding through. I also prefer to use attribute selectors for this sort of css tom-foolery.
[selectable-text]{
padding: 0;
width:100%;
border: none;
resize:none;
background:none;
font-size:inherit;
font-family:inherit;
font-weight:inherit;
color: inherit;
}
<h1>
<textarea selectable-text disabled="disabled" rows=1 >Soldering Iron 110v</textarea>
</h1>
<p>
<textarea selectable-text disabled="disabled" rows=1 >This is a fine soldering iron.</textarea>
</p>
<h1>Soldering Iron 110v</h1>
<p>This is a fine soldering iron.</p>

Using span with javascript to create CSS transition

Using javascript, I randomly pick a word from a text in an html div tag and surround it with a span tag. Using the class of the span tag I try to perform a CSS transition of the word color from black to red. I then remove the span tag to change the word back to black color. The effect I am looking for are "flashing words".
I manage to get the word to change color, but can not get the smooth CSS transition to work.
My question is: Why isn't the CSS transition working?
My problem seems similar to this question, but I do not manage to get the solution of "forcing a layout" to work in my case.
I hope it is ok to provide a working link to the test code I am working with instead of posting code here (javascript file here). If not, I will of course on request add code to this post.
Thank you in advance! I have been busting my head against this problem for a full day without success. Time to acknowledge that I need help with this one :-)
Edit: Adding code.
HTML:
<div id="message">
Some words here.
</div>
CSS:
div#message span
{
color: black;
}
div#message span.redtext
{
transition: color 5s ease-out 0s;
color: red;
}
Javascript:
//Insert span around word
var newText = text.split(randomWord).join('<span>' + randomWord + '</span>');
$("#message").html(newText);
//Request property that requires layout to force a layout
var x = $("#message").clientHeight;
//Add class to span
var newText = newText.split('<span>').join('<span class="redtext">');
$("#message").html(newText);

CSS transitions apply to style changes on elements. When a new CSS style applies to the element you are able to specify the transition to use in that change. In your example, you have added a span which is created with a red text style. The span element has the red text style on creation. You are not transitioning an element from one style to another, you are simply inserting it with the redtext class style.
What you need to do is add a span with black text inside it, and then change the class of the span from "blacktext" to "redtext", and the transition will apply. You could insert it without a class at all and then change it, but I used the class 'blacktext' to make it easier to identify.
See:
http://jsfiddle.net/n8zNW/

Give your span a class so that you can easily get a reference to it using jquery. Then use the addClass and removeClass jquery methods to add and subsequently remove the class that gives the text its colour.
Here's a working example: http://jsfiddle.net/sVMZJ/

Add a CSS that enlarge the value when the mouse hovers over it

I have a table inside an html page created by Javascript and hold number inside its cells i want to enlarge the number when the mouse hovers over it using css style.

I'd do something like:
table td:hover {
font-size: 1.1em;
}
This way, you're sure to have a bigger font than what's already there.

look into css :hover selector
this mainly works for anchor tags in most browsers, if you want to do hover for other elements you might want to use javascript

Here's an example: http://jsbin.com/urube4/edit
You can either use the :hover psuedo-selector on the td, or on the span inside, depending on the effect you want.
The first table in the example will only activate the hover on the mouseover of the text, while the second example will activate on the mouseover of the table cell.
As stated, you'll have an issue here with IE6, as it only recognizes :hover on a tags and form elements such as button and input. If you want IE6, you'll need to use JavaScript.

table td:hover {
font-size: 14px; // greater than actual size
}

Delete text from copied text

I would like to use JavaScript to clean up text that’s being copied from my site.
I use snippets like this:
body {
vertical-align: middle; ➊
}
Where ➊ indicates comment later on. I want readers to copy this snippet and use it – so I need to delete that Unicode marker. How can I access text that’s being copied and make changes to it?
I considered deleting marker(s) from snippet when user clicks (mousedown) on it, so she could select the text, copy it and then I would restore markers but it seems a really long way to do it.

Just put the unicode markers in span tags, and put display none on them when the user clicks
body {
vertical-align: middle; <span class="marker">➊</span>
}
And then do this in jQuery
$('.code')
.mousedown(function() {
$(this).find('.marker').css('display','none');
})
.mouseleave(function() {
$(this).find('.marker').css('display','inline');
});
As a bonus, you could then apply the following style to the .marker elements:
​.marker
{
position:absolute;
right:0;
}​

You could turn the unicode marker into an image, as images are ignored when copying plain text.

just set the markers in comment? so it doesn't do any harm when being used after copying

There is an oncopy handler, but I doubt it is widely supported. There are also selection event handlers like onselectstart (again, different for different browsers) and various attributes to make a part of the text unselectable, like -moz-user-select: none (yet again, not cross-browser). You are probably better of using absolutely positioned markers or making the marker unaccessible through z-index.