CODEWITHSUNDEEP
htmllistcss
user1752759
user1752759

Reputation: 643

HTML: Lists, Sublist and Pseudo Elements

I need to create a list similar to: http://jsfiddle.net/BkBZJ/

Only, without the extra markup in the HTML (span tags with classes or nested lists within lists).
Does anyone know of a way I can achieve this, say with a pseudo element such as before/after, last-child, nth-child etc...

or is this not possible without the additional markup in the HTML.

Upvotes: 2

Views: 356

Answers (2)

Sean Vieira
Sean Vieira

Reputation: 160005

Simply do the following (JSFiddle):

CSS

body {
    background: #202024; 
    color: #FFF;
    font: .75em Arial, san-serif;
}

h1 {
  font: 1.25em Arial, san-serif;
    text-transform: uppercase;
}

#education dt { margin-top: 15px;}
#education dd {
    text-indent: 25px;
    color:#C5B7A6;
}
/* Add the dashes where appropriate */
#education dd:before {
    content: "- ";
    display: inline-block;
}
/* Override the styles for specific dds */
#education .co {color:#FFF; margin-left:50px;}

/* Or, alternately if all except the first dd should be white */
#education dd:first-child { color: #C5B7A6; margin-left: 0; }
#education dd { color: #FFF; margin-left: 50px; }

HTML

<div id="education">
<h1>Education</h1>
<dl>
    <dt>Holmsglen Institute of TAFE</dt>
        <dd>Certificate II &amp; Certificate III of Multimedia</dd>
    <dt>RMIT University</dt>
        <dd>Advanced Diploma Of Interactive Media</dd>
    <dd>2D Animation Major</dd>
    <dt>Swinburne University</dt>
        <dd>Bachelors Degree of Digital Media</dd>
        <dd class="co">Branding &amp; Advertising Co-Minor</dd>
        <dd class="co">Motion Graphics Co-Minor</dd>
</dl> 
</div>​

Upvotes: 1

Noah
Noah

Reputation: 106

Well you could always use :nth-child(x) where x is the one you want to modify, and then apply a margin-left to it as well as a color: change to it.

ex: http://jsfiddle.net/PcA4u/

Upvotes: 1

Related Questions