Can CSS attribute selectors see element's text?

HTML & CSS
1

I’m working on a design that includes drop caps, which are easy enough with fonts, but I’m trying to use a set of images… I have a theory, and wanted to see if anyone can confirm/deny if using the attribute selector will do what I want…

Essentially I’d like to have simple paragraph markup without extra spans or what-have-you, and do the work all in css. I was thinking something like this might work:


<p class="dropcap">Here's a paragraph...</p>



p.dropcap:first-letter {display:block;float:left;width:80px;height:80px;...}

p.dropcap:first-letter[A] {background-image:url(images/myAimage.png);}
p.dropcap:first-letter[B] {background-image:url(images/myBimage.png);}
p.dropcap:first-letter[C] {background-image:url(images/myCimage.png);}
...

Can this work? Otherwise I think I’d have to use a span around the first letter of the paragraph, and I’d like to avoid that if possible…

2

I am afraid that CSS DOESNT read content, and can only insert content in a limited number of situations.

Even if it could have, it couldn’t DELETE content either (meaning you may need to do text-indent or or somehow hide the original first letter)…

Once you have that working… you could a number of methods to avoid using spans.

The simplest approach and most cross-browser friendly, would be to create class for each letter which contain the bg image , as such:


p.dropcap:first-letter {display:block;float:left;width:80px;height:80px;...}

p.letterA:first-letter {background-image:url(images/myAimage.png);}
p.letterB:first-letter{background-image:url(images/myBimage.png);}
p.letterC:first-letter {background-image:url(images/myCimage.png);}

<p class="dropcap letterH">Here's a paragraph...</p>

hope that helps

3

Thanks, dresden_pheonix… I suspected as much, but the way it was worded on the sitepoint css reference led me to hope a little. The way you suggested will work just as well, tho it will require my client to remember to add two classes to the paragraph (he’s a very non-techy type, so I wanted to make it as simple as possible)…

I suppose I could to a quick javascript replacement as an alternative. More fun to find ways to do things with pure css tho :slight_smile:

Thanks for the uber-quick response!

4

Glad to help, madsamurai.

well, the OTHER way… to do this would be to use an [attr] selector. you would still have to code the letter into the tags attribute…and older versions of IE dont understand CSS attributes. Maybe this led you to believe you could combine techniques… which is really not possible with CSS.

5

OK, well… I have this working perfectly in Safari and Chrome, but Firefox and IE only render the top left corner… maybe you can show me where I’m going wrong…


//html
<p class="dropcapA">An awesome paragraph</p>

//css
p.dropcapA:first-letter,p.dropcapB:first-letter, (etc...)
{
	display: block;
	width:60px;
	height:60px;
	padding: 10px;
	margin: -17px 3px -10px -10px;
	float: left;
        text-indent:200px;
	overflow:hidden;
}

p.dropcapA:first-letter
{background:transparent url(../images/dropcaps/A.png) no-repeat left top;}
p.dropcapB:first-letter
{background:transparent url(../images/dropcaps/B.png) no-repeat left top;}
...

(I did it this way so there’s only a single class to add to the paragraph, so my client doesn’t have to remember to add a dropcap class and a letter class like you suggested.)

IE8 and FF don’t seem to respect the width/height, tho margin and padding seem to hold up. IE6&7 show the original letter and a smaller corner of the image next to it. I’ve tried display as block, inline-block, and inline, all with the same result. I’m sure I’m missing something simple… I’m almost convinced it can’t be done without a span around that first letter.

6

As I suspected, switching to a span with the same css values works perfectly in all but IE6, which I could care less about… guess I’ll stick with that for now, since it’s just as easy to select a letter and apply a class as it is to apply one to a paragraph.

7

This works for me in IE6 ok.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p{clear:left;margin:0 1em;}
p b{
    float:left;
    width:0;
    height:0;
    padding:70px 70px 0 0;
    overflow:hidden;
  margin:5px 0 2px 0;
}

.a{background:red;}
.b{background:blue}
.c{background:green}
</style>
</head>

<body>
<p><b class="a">A</b>n awesome paragraph</p>
<p><b class="b">A</b>n awesome paragraph</p>
<p><b class="c">A</b>n awesome paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</body>
</html>