Is this possible without introducing Javascript or adding to the HTML?

Question

My client wants every link list, that is, every list of the form

<ul>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
</ul>

to have the bullets of the list be the same color as the linked text, but every non-link list, that is, every list of the form

<ul>
     <li>Here's a regular list item</li>   
     <li>Here's a regular list item</li>
     <li>Here's a regular list item</li>
</ul>

should have its bullets and corresponding text inherit as usual.

Fiddle: http://jsfiddle.net/0kkc2rz4/

I am constrained by not being able to add classes into the HTML, so something like

<ul class='link-list'>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
</ul>

ul.link-list li { color: #004E98; }

is out of the question, although I realize that's the obviously best way to do it if I was coding the site from scratch. I can add JS, but would prefer not to.

Here's the answer to your question: http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector - summary: as of right now, this is not possible to do with pure CSS — Icarus, Apr 02 '15 at 16:16
Are you able to add Font Awesome (http://fortawesome.github.io/Font-Awesome/) ? If so it will be helpful — Eranda, Apr 02 '15 at 16:29

score 6 · Accepted Answer · answered Apr 02 '15 at 16:28

6

Here's a solution using a pseudo element and the unicode character for bullet points. The basic idea is to 'overlap' the a bullet over the li bullet, giving the effect that they are different.

ul{
  margin:0em;
  padding:0em;
  list-style:none;
  padding:20px 20px 0px 20px;
  font-family:sans-serif;
}


li{
  margin:0em;
  padding:0em;
  padding-bottom:10px;
}

a{
  color:red;
  text-decoration:none;
}

a:hover{
  color:green;
}

a, li{
  position:relative;
}

a:before, li:before{
  content:'\2022';
  position:absolute;
  left:-0.5em; 
  color:inherit;
}

<ul>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        Here's a regular list item       
    </li>
</ul>

answered Apr 02 '15 at 16:28

Jesse Kernaghan

4,160
1
17
25

So is there no way to do this without re-creating the bullet (essentially) with :before selectors? This seems to just be another situation of needing to select a parent of something, which can't be done in css. I was hoping to see a weird solution that might involve something like the :not selector, but I don't think there is one. – ferr Apr 02 '15 at 16:39
@ferr not that I know of, unfortunately. Behind the scenes the browser is ultimately just doing the same thing: adding a `•` `:before` each list item. This just does the same thing to the `a` tag and overlaps them. We just need to do it again for the `li` for cross-browser normalizing. – Jesse Kernaghan Apr 02 '15 at 16:45

score 1 · Answer 2 · answered Apr 02 '15 at 16:49

Playing a bit with pseudolements: http://jsfiddle.net/2acw2hae/1/

ul { list-style: none; }

ul a { position: relative; }

ul a:before { 
    content : "\25CF"; /* unicode for black circle */
    font-size: 0.75em; 
    margin-right: .5em;
}

/* this overlaps the text-decoration under the bullet */
ul a:after { 
    content : "";
    position: absolute; 
    bottom: 0; left: 0; 
    height:4px; 
    width: .5em; 
    background: #fff; 
}

Result

enter image description here

Is this possible without introducing Javascript or adding to the HTML?

2 Answers2