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.

Best way to create link inside td with onMouseOver function?

I have a table which includes a td with an onMouseOver function that changes the background color of the td. The text inside the td is a link. The problem I am having is that the link appears "highlighted" when the mouse hovers over the td, but can't be clicked on unless the mouse is hovering over the link itself. In other words, there is kind of a "buffer" zone around the link text but inside the boundaries of the td where the background color is changed but the cursor remains the standard pointer (and the link cannot be clicked). Is there a way to cause the entire td to be a link, or would I have to use two different images to get the desired effect?
Example code:
<table>
<tr>
<td onMouseOver="bgColChange();" style="background-color:#ffffff;">
Location 1
</td>
</tr>
</table>

You can do something like this:
<table>
<tr>
<td class="myTD0" onMouseOver="bgColChange();" style="background-color:red;cursor:pointer;" onClick="document.getElementById('myLink0').click();">
Location 1
</td>
</tr>
</table>
See I have added onClick on td with id of anchor tag
onclick="document.getElementById('myLink0').click();"
Demo Fiddle
I guess this is what you are looking for.

From what I understand, you want a TD element with a link inside of it and you want to:
change BG color when hovered
make entire TD element clickable for the link
The first thing to note is you're using inline JavaScript. That means you're placing raw JavaScript code inside your HTML. That is not a good practice or convention to follow. In the last several years the JavaScript community has stepped away from inline JavaScript.
Instead, the better approach is called "unobtrusive JavaScript" which is a fancy name that means you give your HTML elements class/ID names that you can reference in your JavaScript and CSS files.
This Wikipedia Article on Unobtrusive JavaScript is pretty good at showing what the differences are. The takeaway is that unobtrusive JavaScript is the preferred practice and should be used as much as possible.
I know there are unique situations where inline JS is still necessary, but you're particular problem doesn't need any JavaScript. You simply need to use some specific CSS. Often times the best solution is the simplest.
# HTMl file
# ----------------------------------------
<table class="custom">
<tr>
<td>
Location 1
</td>
</tr>
</table>
# CSS file
# # ----------------------------------------
.custom {
width: 100%;
}
/* Give TD element padding so you can see that link expands properly */
.custom td {
border: 1px solid black; /* For visual aid */
padding: 10px;
}
/* Change background color on hover of TD element */
.custom td:hover {
background: #ccc;
}
/* Change link color when hovering over TD element */
.custom td:hover a {
color: #fff;
}
/* Make link expand to entire TD element (its parent) */
.custom td a {
display: block;
text-decoration: none;
}
Here is a JS Fiddle example that works without using any JavaScript.
This solution is preferred because it does not use JavaScript and is much easier to understand as another developer.
You only need to add a custom class to your TABLE element so that you can attach CSS styles to it. I've added several comments in the JS Fiddle so be sure to check them out. You can also play with the JS Fiddle example to help you understand it further.

How to keep a Jquery slider on the right side of some text in some html table cell?

I am trying to implement a JQuery slider next to some text and span in a table cell.
<tr>
<td>
Transfert: <span id="Trans" /> <div id="TraSlider" />
</td>
</tr>
Unfortunately, the slider will not stick to the right or the text. It seems like div is the issue. I tried to change it to span, but the slider is not displayed properly anymore.
How can I achieve this (without moving the slider to another cell)?
P.S.: Here is a JsFiddle.

It seems like it just to be inline-block and with a width. With that in mind, see this fiddle:
.ui-widget-content {
display:inline-block;
width:100px;
}

you can (display: block) in the css for those cntents, but the ordering of those contents will always make a difference .
or you can try to make the slider div floated to right with CSS so the other stuff are not in affection with it's absolute place .

Looks like someone beat me to it while I was fiddling. Here it is anyway.
-- .val() works on inputs FYI.
// css and table width will squeeze your text so:
http://jsfiddle.net/devitate/MTD78/3/

Div breaks jQuery accordion

I have a jQuery accordion that breaks when I need to place a div-tag in one of the sliding open areas.. How do I get around this? I need to put a div-tag since I cannot make a nice box out of a span-tag. Anyone knows a way around this??
Please see my demo here to see where it breaks :(
http://jsfiddle.net/zRqYM/

You should probably change this:
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
to:
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
and the CSS:
.accordion2 > div {
background: #f7f7f7;
/* etc... */
It makes more sense to use a DIV instead of P if you want to put other elements inside the expandable content: http://jsfiddle.net/zRqYM/13/
Or just use inline elements inside the P tag and style them to display:block;, but it doesn’t make semantic sense to me.

This seems a bit lame, but you can use a span and just set it to display: block. Then it's essentially a div: http://jsfiddle.net/zRqYM/5/

Why cant you put it in a span and style the span as a nice box with display block?

You can use a span-tag. All you need to do is add the following styling for your span-tag class in the css
.whatever {
border: 1px solid #000;
display: inline-block;
margin: 0 5px;
}

There is a different way to try your accordion without messing around with CSS
Get your HTML done as follows;
<div id='accordion'>
<h3>Title of the view</h3>
<div>
all the stuff you want to do here
</div>
<h3>Title of the view</h3>
<div>
all the stuff you want to do here
</div>
</div>
and make your script file as
$('#accordion').accordion({ active: 0 });
For more info: visit http://jqueryui.com/demos/accordion

I've updated your jsfiddle: http://jsfiddle.net/zRqYM/21/ and changed your p tags to div tags since it allows the most tag nesting.
As a general rule, a div tag cannot be inside of a p tag since it will cause the p tag to close itself.

JavaScript Gallery glitch (layers??)

Hope someone can help me, I have an index.php setup and in the head I have a sideshow script set and this runs on all pages, and then in the portfolio.html (loads inside the index.php file when that page is called up) I have a gallery script.
My problem is when I click on a gallery image it opens up but behind this "header gallery" ...
image of what the problem is:

#pjumble is right about wanting to change the z-index. The problem you're having is probably related to the CSS Selectors priority.
When defining a CSS format you can write the selector statement in 3 basic ways and mix and match these as you please for advance selector definitions. Here are the 3 basic ways,
1.
Class's Looks something like this.
.class1
{
color:blue;
font-size: 24px;
background-color:red;
}
this is the Lowest priority
2.
ID's Looks something like this.
#id1
{
color:yellow;
font-size: 12px;
}
This is medium priority
3.
Tag's look something like this.
Div
{
color:green;
}
This one gets highest priority. This always seems counter intuitive to me. If I define and ID level format you think that would have priority over the one for that Tag name but it doesn't.
Here's and example of what I'm talking about.
So for an element like this
<Div id="id1" class="class1">
Text
</div>
The "Text" here is going to have a red background because "class1" is the only definition with a background-color.
But both "id1" and "class1" have definitions for font-size so the class definition is ignored and the id one is used making "Text" 12px.
Then all three definitions have "color" defined and the winner is "Div" making "Text" green.
so when you write your set up like this,
#lightbox a z-index of 100, .gallerylayer has a z-index of 1000
you have the right idea but your definition for ".gallerylayer" is a class and if the tag or id of that section of code has z-index defined, your class definition of z-index = 1000; will be ignored.
Just to make sure the definitions not ignored I'd give the tag that has class='gallerylayer' in it and add a id='somethingUnique' attribute and use that to define the z-index rule.
But the best way to check this is to use Firefox with the Firebug add-on and use the element selecting tool to see what styles are being apply and which are begin ignored on your page.
For more on selectors try looking here it should give you all the documentation you'll need.
hope this helps.