CSS: How to make text italic between img and br tag

Here is something I have been struggling with for the last weeks now.

Let's say I have the following html (simplified example code)

<img class="myimageclass" /> This is some text <br />

Then my problem is: How could I make the text between the img en br tags italic? The text before the img tag and after the br should not be given the italic style though. This piece of code is found multiple times in the document.

Now this might seem like a very simple question but the thing is: I cannot make changes to the actual html. So the styling needs to be done with pure CSS or jQuery.

Does anybody know if this is possible? And if so, how?

I was personally thinking about using the :after and :before pseudo elements to insert tags. But I don't know if this is possible or if it would be the best way.

tnx!

Answers


After much research and checking all the suggestions I think the only valid conclusion is that it is simply impossible to do so. jQuery is the only alternative in this case.

Thanks all for the suggestions!


<img class="myimageclass" /><span><i> This is some text</i></span> <br />

else the link below might helpful to u to learn before and after clause

http://cssdeck.com/labs/styling-select-box-with-css3


The problem here is that you can't target/style plain text which is not within a tag.

So I think the best you can do here is set font-style: italic; on the body, and then assuming the rest of the text sits within tags like <div> or <p> - override that style to font-style: normal;

FIDDLE

body
{
    font-style: italic;
}
p, div, span, input /* etc */
{
    font-style: normal;
}

If you had a parent element then you could target that

FIDDLE


Please use this code it will work fine through the entire html following logic!
<!DOCTYpE html>
<html lang = "en"> 
<head>
    <title>Combinator</title>
 <style> 
   .myimageclass ~ p::first-line{
     color:hsla(0,100%,50%,1);
     font-style:italic;

 }
 </style>
</head>

<body>
<img class="myimageclass" /> <p>This is some text </p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
</body>
</html>


Try the code below:

CSS Code:

img.myimageclass span{
font-style:italic;
}

jQuery Code:

$('.myimageclass>img').each(
   function(){
        $(this.firstChild).wrap('<span></span>');
    });

Without any changes in HTML Code.


Need Your Help

How to select sibling branch only of TreeView with jQuery?

jquery treeview siblings

I have a multi-level treeview using KendoUI from Telerik and I'm trying to get the correct Id's for the branch of a re-ordered node.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.