CSS nth-child

Status
Niet open voor verdere reacties.
F

Frenske123

Terugkerende gebruiker
Lid geworden
2 jul 2007
Berichten
1.260
Hallo

Ik wil de letter 2 in rood hebben (<p>12345</p>)
Maar de bedoeling van de CSS zal per element zijn.
is dit mogelijk en hoe?

Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naamloos document</title>
<style>
p:nth-child(2) {
    color: red;   
}
</style>
</head>

<body>

<p>12345</p>

</body>
</html>
 
Helaas kan je met CSS niet per letter werken.
Maar sowieso ben je niet semantisch bezig, want je hebt nu een genummerde lijst in een paragraph staan, maar die hoort uiteraard in een list-element met li.

Code: 
<div class="container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

Code: 
ul li {
     display: inline;
     }
  
 ul li:nth-child(2) {
    color: red;   
}


Zie ook: https://jsfiddle.net/gb5y2m4d/
 
Bedankt voor reactie
Dacht ik al en voorbeeld was niet zo handig.

Ik heb nou dit

PHP: 
$str = '12345;

print_r('<span class="km0">'.$str[0].'</span><span class="km1">'.$str[1].'</span><span class="km2">'.$str[2].'</span><span class="km3">'.$str[3].'</span><span class="km4">'.$str[4]).'';

maar $str kan ook 123 of 123456 zijn dus 2 of 6 cijfers bevatten
 
Laatst bewerkt:
Je kan ook een <span> gebruiken om inline te kunnen stylen.
 
Ik had bijv. graag het 3e cijfer de kleur rood vandaar nu zo de span
 
Maar waarom staan de cijfers achter elkaar in een paragraph? Kan je daar geen invloed op uitoefenen?
 
Die heb ik toevallig achter elkaar gezet in voorbeeld en paragraph was slecht voorbeeld,kijk naar post #3 met span

Het is een Km stand dus mogelijk

100
1000
10.000
100.000

jet gaat eron dat ik bijv, elek 3e cijfer kleur kan geven.
 
Laatst bewerkt:
Het derde getal kan je ophalen met een simpele PHP-trick..
<?php
$string = "100.000";
echo $string[2]; // telt vanaf 0, dus 2 is 3. Resultaat de tweede 0 als derde teken.
?>
 
Of doorloop met substr($string, $i, 1) of gebruik strstr($string, '.')
Het is een beetje afhankelijk van wat je wilt kleuren.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan