CODEWITHSUNDEEP
htmlcsscss-selectorscss-specificity
LOTUSMS
LOTUSMS

Reputation: 10240

How to successfully target the second part of a string in a span tag with specificity

I understand the easiest way is to "class" something and then give the class the properties needed, however,

1. I'm not a big fan of creating classes everywhere. That's what specificity and CSS mapping is for.

2. It would take me forever to go through hundreds of pages to add these classes and some of the pages I'm not even supposed to even touch AT ALL!

So, at least I have a parent class to start with :) But my problem is, I have never had to target the second part of a text inside span tags divided by a <br> .

Here is the HTML

<div class="locations">
<ul>
    <li><strong>Address: </strong><span>47 Feed Mill Lane
        <br>
        Middlebury, VT 05753</span></li>
    <li><strong>Contact: </strong><span>John Doe</span></li>
    <li><strong>Phone: </strong><span>800-639-3191</span>/li>
    <li><strong>E-mail: </strong><span> <a href="mailto:[email protected]">[email protected]</a></span></li>
</ul>

and the CSS for the line in question. I added this specificity logic, but it is taking the entire content inside the <span> I want to select the portion after the <br> so I can indent it. 

.locations > ul > li:first-child > span:nth-child(2) {
    background-color: #34678a; /*for testing purposes only */
    text-indent:25px;
}

Here is the FIDDLE

And a little visual doesn't hurt ;) enter image description here

Upvotes: 2

Views: 448

Answers (2)

j08691
j08691

Reputation: 207861

CSS can't read the content of your elements and therefore has no idea where the <br> tag is. Target it instead with display:inline-block; and vertical-align:text-top;

jsFiddle example

You can use the following:

.locations > ul > li:first-child > span:nth-child(2) {
    background-color: #34678a;
    display:inline-block;
    vertical-align:text-top;
}

Upvotes: 3

Jasuten
Jasuten

Reputation: 1570

You can't target the second part of the text using css (as it's not a separate element). However you can still indent the text by using a combination of padding and negative margins.

Example 1:

.locations li {
    display: block;
    padding-left: 65px;
}
.locations li strong { 
    margin-left: -65px;
}

Example 2 (all strong tags same width):

.locations li { 
    display: block;
    padding-left: 70px;
}
.locations li strong {
    margin-left: -70px;
    width: 70px;
    display:inline-block;
}

Upvotes: 1

Related Questions