I have the following html structure:
<div class="decorator">
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="EC_MyICHP_Item">
<div class="text">
<h3><a target="_blank" title="" href="#"></a></h3>
text here text here text here text here text here text here
</div>
</div>
<div class="readmore"><a></a></div>
</div>
I am trying to select the LAST EC_MyICHP_Item, by using last-child, but in vain. (both CSS and jQuery) Could you help me?
Thanks.
You need to use :last-child at the end of the selector.
div.EC_MyICHP_Item:last-child
http://reference.sitepoint.com/css/pseudoclass-lastchild
Example: http://jsfiddle.net/jasongennaro/zrufd/
Please note: this will not work in earlier versions of IE.
EDIT
As per the comment about the last div being added and it interfering. You're right. It does cause :last-child to choke... at least in Chrome where I tested it.
If your HTML structure remains the same, that is, always three div.EC_MyICHP_Item, you could do this
.EC_MyICHP_Item:nth-child(3)
Updated Example: http://jsfiddle.net/jasongennaro/zrufd/1/
EDIT #2
unfortunately the number of EC_MyICHP_Item div's varies
In that case, I would use jQuery:
$('.EC_MyICHP_Item:last')
Further updated example: http://jsfiddle.net/zrufd/2/
.EC_MyICHP_Item:last-child should work well.
It's important to realize that E:last-child means "an E element, which is a last child", not "last child of E element".
I added the ID for merely testing purposes.
But use :last.
http://jsfiddle.net/aDbcW/1/
.EC_MyICHP_Item:last-child would only work if the div is the last child of its parent div. Since you have div.readmore as the last child of the parent, your selector wouldn't work. You need to use .EC_MyICHP_Item:last-of-type instead.
Edit: in jQuery this would translate to .EC_MyICHP_Item:last.
Related
i want to fill text in selenium firefox broswer
how to find entering text selector its very complex for me please explain me the only way i want to achieve this using only css selector
<div class="Gb WK">
<div class="Rd"guidedhelpid="sharebox_editor">
<div class="eg">
<div class="yw oo"">
<div class="yw vk"">
</div>
<div class="URaP8 Kf Pf b-K b-K-Xb">
<div id="195" class="pq"
Share what's new...
</div>
<div id=":37.f" class="df b-K b-K-Xb URaP8 editable" contenteditable="true"
g_editable="true"role="textbox"aria-labelledby="195"></div>
</div>
</div>
</div>
</div>
You already wrote the cssSelector. However I will explain this for you. CssSelector allows you to use single/multiple attribute search. In case if you don't find a single attribute unique you can keep adding more attribute to the selector
Single attribute
[role='textbox']
Multiple attributes
[role='textbox'][contenteditable='true']
If you want to add div for a faster search that's possible too
div[role='textbox'][contenteditable='true']
Notice if I don't add div it's going to be tag independent search
I can't float my image the way I want in the post editor. I need to have it sit next to several separate elements (2 different headings + a paragraph), not just one element. And I see no way to do that.
Any suggestion would be welcome.
I would do it in the text tab of the editor like this.
<img src="my image" style="float:right" />
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
You want the <img> with the float:right property first, then the rest of headings and the paragraph
Here is a demo http://jsfiddle.net/d55psoqq/
Note: the Wordpress "alignright" property usually added when you add an image with the media manager, will do the same as the style="float:right;" if it is properly defined in the stylesheets. (I have encountered some themes were it is not defined) If "alignright" does not work you can add it to the main stylesheet like this...
.alignright {float:right;}
Update:
To get all the text to stay at the left and never flow under the image, you need to force it into a column like this...
<img src="http://placehold.it/350x200/" style="float:right" />
<div style="overflow:hidden">
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
</div>
Demo http://jsfiddle.net/d55psoqq/3/
I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…
Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.
Here’s the link for the page: http://www.dinneronthespot.com/index2.html
The solution is, use span
<span id="dotPerfect">
<span id="color1">Dinner </span>
<span id="color2">On The </span>
<span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>
try this:
#topText > h1 > div {
display: inline;
}
add this code in the stylesheet
Use span instead of div for this kind of actions.
<h1>
<span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>
I’ve put each word in a different div id to change the text color.
I’m not sure if there is a better way than this…
It's better to use <span>-Tags
DIV-Tags do also have a default property "display:block" from user agent style, that's the reason why you have to set "float:left" (which is really ugly in this case).
Try this
<div id="dotPerfect">
<div id="color1">Dinner </div>
<div id="color2">On The </div>
<div id="color3">Spot </div>
<div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>
Move the div with id dotPersonal to div with id dotPerfect.
Hi I have a text widget with one line of text "Connect with me on Facebook" that displays at the bottom of this page http://contemporaryinteriordesigns.com.au/. It displays on 1 line for every browser except for IE8.
Does anyone know why IE8 is creating a line break and how I could fix it?
Thanks, Dan
I think IE8 is acting weird because you're styling the text in the div selector. Try wrapping that text into a tag:
<div class="textwidget">
<a><img/></a>
<p>Connect with me on Facebook</p> <!-- Wrap it in a paragraph -->
</div>
The <div> tag defines a division or a section in an HTML document. and The <p> tag defines a paragraph. Wrapping the text in <p> is more semantically correct. Then style the <p> till you get it right. Since I can't edit the code and I'm testing with IETester I can't try it out.
I have a template that I am modifying the text and pictures. It's all based on a 960grid, and the text is styled in external css sheets. When I copy one of the pieces of text (placed on the right of the site), and paste... it kicks the text to the left sidebar. What am I doing wrong? When I check the pasted text, it contains the same class, as the one that I copied from.
Thanks in advance.. I'm new to this and its giving me such a hard time!
Most likely it is contained in something like a 'right sidebar' that actually places it on the right side of the page. Try making the division directly below where the division you copy ends.
<div class="right-sidebar">
<div class="something">
</div>
</div>
Into
<div class="right-sidebar">
<div class="something">
</div>
<div class="something">
</div>
</div>