0

I am working on a blog site built with Middleman. The default list-style-type for lists is in _lists.scss and works correctly where each li element has a disc. However, I want to override this for the h3 element in the li.

Here is an example of my list html:

<div id="main" role="main">
<ul>
    <li>
      <h3>heading</h3>
    </li>
</ul>

Here is the css I have been working with:

ul, ol {
  margin: 0;
  padding: 0;
  list-style-type: none;

  &%default-ul {
    list-style-type: disc;
    margin-bottom: $base-line-height / 2;
    padding-left: $base-line-height;
  }

  &%default-ol {
    list-style-type: decimal;
    margin-bottom: $base-line-height / 2;
    padding-left: $base-line-height;
  }
}

#main > ul > li > h3 {
    list-style-type: none;
}

But nothing changes on the screen.

Anything I am missing? Any help is appreciated.

analyticsPierce
  • 2,677
  • 8
  • 44
  • 77
  • This is not possible with CSS as it has no selector (yet) for determining the content of an element. – Paulie_D Sep 24 '17 at 09:16
  • Essentially a duplicate of https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector/1014958#1014958 – Paulie_D Sep 24 '17 at 09:18

1 Answers1

-1

Give list-style-type to li of any ul not to child of li try like this

#main > ul > li{
    list-style-type: none;
}
Anand
  • 167
  • 8