diff --git a/.gitignore b/.gitignore
index 373c5df..6a9158a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 package-lock.json
-.DS_Store
\ No newline at end of file
+.DS_Store
+.idea
\ No newline at end of file
diff --git a/README.md b/README.md
index 0a04e92..568a0ad 100644
--- a/README.md
+++ b/README.md
@@ -17,4 +17,16 @@ A simple scss package extending Bulma with block style list elements
 </ul>
 ```
 
+## List Item Overrides
+
+In v0.3 you can override the list item styles.
+
+```html
+<ul class="block-list is-small">
+    <li>Item one</li>
+    <li class="is-primary is-outlined is-large">Item two</li>
+    <li>Item three</li>
+</ul>
+```
+
 For examples see [csrhymes.com/bulma-block-list](https://www.csrhymes.com/bulma-block-list)
\ No newline at end of file
diff --git a/docs/demo.css b/docs/demo.css
index 9a11763..a5f7eb3 100644
--- a/docs/demo.css
+++ b/docs/demo.css
@@ -7107,106 +7107,135 @@ label.panel-block {
     padding: 16px;
     background: whitesmoke;
     margin-bottom: 0.25rem; }
-  .block-list.is-left li {
+  .block-list li.is-left,
+  .block-list.is-left > li {
     text-align: left; }
-  .block-list.is-centered li {
+  .block-list li.is-centered,
+  .block-list.is-centered > li {
     text-align: center; }
-  .block-list.is-right li {
+  .block-list li.is-right,
+  .block-list.is-right > li {
     text-align: right; }
-  .block-list.is-small li {
+  .block-list li.is-small,
+  .block-list.is-small > li {
     font-size: 0.875em;
     padding: 10.66667px; }
-  .block-list.is-normal li {
+  .block-list li.is-normal,
+  .block-list.is-normal > li {
     font-size: 1em; }
-  .block-list.is-large li {
+  .block-list li.is-large,
+  .block-list.is-large > li {
     font-size: 1.5rem; }
-  .block-list.is-white li {
+  .block-list li.has-radius,
+  .block-list.has-radius > li {
+    border-radius: 4px; }
+  .block-list li.is-white,
+  .block-list.is-white > li {
     background: white;
     color: #0a0a0a; }
-  .block-list.is-white.is-outlined li {
-    background: transparent;
-    color: white;
-    border: 1px solid white; }
-  .block-list.is-white.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-black li {
+    .block-list li.is-white.is-outlined,
+    .block-list li.is-white.is-outlined > li,
+    .block-list.is-white > li.is-outlined,
+    .block-list.is-white > li.is-outlined > li {
+      background: transparent;
+      color: white;
+      border: 1px solid white; }
+  .block-list li.is-black,
+  .block-list.is-black > li {
     background: #0a0a0a;
     color: white; }
-  .block-list.is-black.is-outlined li {
-    background: transparent;
-    color: #0a0a0a;
-    border: 1px solid #0a0a0a; }
-  .block-list.is-black.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-light li {
+    .block-list li.is-black.is-outlined,
+    .block-list li.is-black.is-outlined > li,
+    .block-list.is-black > li.is-outlined,
+    .block-list.is-black > li.is-outlined > li {
+      background: transparent;
+      color: #0a0a0a;
+      border: 1px solid #0a0a0a; }
+  .block-list li.is-light,
+  .block-list.is-light > li {
     background: whitesmoke;
     color: rgba(0, 0, 0, 0.7); }
-  .block-list.is-light.is-outlined li {
-    background: transparent;
-    color: whitesmoke;
-    border: 1px solid whitesmoke; }
-  .block-list.is-light.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-dark li {
+    .block-list li.is-light.is-outlined,
+    .block-list li.is-light.is-outlined > li,
+    .block-list.is-light > li.is-outlined,
+    .block-list.is-light > li.is-outlined > li {
+      background: transparent;
+      color: whitesmoke;
+      border: 1px solid whitesmoke; }
+  .block-list li.is-dark,
+  .block-list.is-dark > li {
     background: #363636;
     color: #fff; }
-  .block-list.is-dark.is-outlined li {
-    background: transparent;
-    color: #363636;
-    border: 1px solid #363636; }
-  .block-list.is-dark.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-primary li {
+    .block-list li.is-dark.is-outlined,
+    .block-list li.is-dark.is-outlined > li,
+    .block-list.is-dark > li.is-outlined,
+    .block-list.is-dark > li.is-outlined > li {
+      background: transparent;
+      color: #363636;
+      border: 1px solid #363636; }
+  .block-list li.is-primary,
+  .block-list.is-primary > li {
     background: #00d1b2;
     color: #fff; }
-  .block-list.is-primary.is-outlined li {
-    background: transparent;
-    color: #00d1b2;
-    border: 1px solid #00d1b2; }
-  .block-list.is-primary.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-link li {
+    .block-list li.is-primary.is-outlined,
+    .block-list li.is-primary.is-outlined > li,
+    .block-list.is-primary > li.is-outlined,
+    .block-list.is-primary > li.is-outlined > li {
+      background: transparent;
+      color: #00d1b2;
+      border: 1px solid #00d1b2; }
+  .block-list li.is-link,
+  .block-list.is-link > li {
     background: #3273dc;
     color: #fff; }
-  .block-list.is-link.is-outlined li {
-    background: transparent;
-    color: #3273dc;
-    border: 1px solid #3273dc; }
-  .block-list.is-link.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-info li {
+    .block-list li.is-link.is-outlined,
+    .block-list li.is-link.is-outlined > li,
+    .block-list.is-link > li.is-outlined,
+    .block-list.is-link > li.is-outlined > li {
+      background: transparent;
+      color: #3273dc;
+      border: 1px solid #3273dc; }
+  .block-list li.is-info,
+  .block-list.is-info > li {
     background: #3298dc;
     color: #fff; }
-  .block-list.is-info.is-outlined li {
-    background: transparent;
-    color: #3298dc;
-    border: 1px solid #3298dc; }
-  .block-list.is-info.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-success li {
+    .block-list li.is-info.is-outlined,
+    .block-list li.is-info.is-outlined > li,
+    .block-list.is-info > li.is-outlined,
+    .block-list.is-info > li.is-outlined > li {
+      background: transparent;
+      color: #3298dc;
+      border: 1px solid #3298dc; }
+  .block-list li.is-success,
+  .block-list.is-success > li {
     background: #48c774;
     color: #fff; }
-  .block-list.is-success.is-outlined li {
-    background: transparent;
-    color: #48c774;
-    border: 1px solid #48c774; }
-  .block-list.is-success.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-warning li {
+    .block-list li.is-success.is-outlined,
+    .block-list li.is-success.is-outlined > li,
+    .block-list.is-success > li.is-outlined,
+    .block-list.is-success > li.is-outlined > li {
+      background: transparent;
+      color: #48c774;
+      border: 1px solid #48c774; }
+  .block-list li.is-warning,
+  .block-list.is-warning > li {
     background: #ffdd57;
     color: rgba(0, 0, 0, 0.7); }
-  .block-list.is-warning.is-outlined li {
-    background: transparent;
-    color: #ffdd57;
-    border: 1px solid #ffdd57; }
-  .block-list.is-warning.has-radius li {
-    border-radius: 4px; }
-  .block-list.is-danger li {
+    .block-list li.is-warning.is-outlined,
+    .block-list li.is-warning.is-outlined > li,
+    .block-list.is-warning > li.is-outlined,
+    .block-list.is-warning > li.is-outlined > li {
+      background: transparent;
+      color: #ffdd57;
+      border: 1px solid #ffdd57; }
+  .block-list li.is-danger,
+  .block-list.is-danger > li {
     background: #f14668;
     color: #fff; }
-  .block-list.is-danger.is-outlined li {
-    background: transparent;
-    color: #f14668;
-    border: 1px solid #f14668; }
-  .block-list.is-danger.has-radius li {
-    border-radius: 4px; }
+    .block-list li.is-danger.is-outlined,
+    .block-list li.is-danger.is-outlined > li,
+    .block-list.is-danger > li.is-outlined,
+    .block-list.is-danger > li.is-outlined > li {
+      background: transparent;
+      color: #f14668;
+      border: 1px solid #f14668; }
diff --git a/docs/index.html b/docs/index.html
index d366829..af59cb8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -203,6 +203,35 @@ <h2>How to use</h2>
                     </ul>
                 </div>
 
+                <div class="column is-12">
+                    <p class="title is-4">List Item Overrides</p>
+                    <p>In v0.3 you can override the classes on a list item</p>
+                </div>
+                <div class="column is-4">
+                    <p class="title is-5">li.is-large</p>
+                    <ul class="block-list">
+                        <li>Item one</li>
+                        <li class="is-large">Item two</li>
+                        <li>Item three</li>
+                    </ul>
+                </div>
+                <div class="column is-4">
+                    <p class="title is-5">li.is-primary</p>
+                    <ul class="block-list">
+                        <li>Item one</li>
+                        <li class="is-primary">Item two</li>
+                        <li>Item three</li>
+                    </ul>
+                </div>
+                <div class="column is-4">
+                    <p class="title is-5">li.is-primary.is-outlined</p>
+                    <ul class="block-list">
+                        <li>Item one</li>
+                        <li class="is-primary is-outlined">Item two</li>
+                        <li>Item three</li>
+                    </ul>
+                </div>
+
                 <div class="column is-12">
                     <p class="title is-4">Combinations</p>
                 </div>
@@ -223,10 +252,11 @@ <h2>How to use</h2>
                     </ul>
                 </div>
                 <div class="column is-4">
-                    <p class="title is-5">is-large is-outlined is-danger is-centered</p>
-                    <ul class="block-list is-large is-outlined is-danger is-centered">
+                    <p class="title is-5">ul.is-danger.is-centered</p>
+                    <p class="subtitle">li.is-outlined.is-large</p>
+                    <ul class="block-list is-centered is-danger">
                         <li>Item one</li>
-                        <li>Item two</li>
+                        <li class="is-danger is-outlined is-large">Item two</li>
                         <li>Item three</li>
                     </ul>
                 </div>
diff --git a/package.json b/package.json
index 7ae5eb4..47e25a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bulma-block-list",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A simple scss package extending Bulma with block style list elements",
   "homepage": "https://github.com/chrisrhymes/bulma-block-list#readme",
   "bugs": {
diff --git a/src/block-list.scss b/src/block-list.scss
index 16e9016..828fe05 100644
--- a/src/block-list.scss
+++ b/src/block-list.scss
@@ -11,42 +11,41 @@ $block-list-separator: 0.25rem !default;
         margin-bottom: $block-list-separator;
     }
 
-    &.is-left {
-        li {
-            text-align: left;
-        }
+    li.is-left,
+    &.is-left > li {
+        text-align: left;
     }
 
 
-    &.is-centered {
-        li {
-            text-align: center;
-        }
+    li.is-centered,
+    &.is-centered > li {
+        text-align: center;
     }
 
-    &.is-right {
-        li {
-            text-align: right;
-        }
+    li.is-right,
+    &.is-right > li {
+        text-align: right;
     }
 
-    &.is-small {
-        li {
-            font-size: $small-font-size;
-            padding: ($gap / 3);
-        }
+    li.is-small,
+    &.is-small > li {
+        font-size: $small-font-size;
+        padding: ($gap / 3);
     }
-    
-    &.is-normal {
-        li {
-            font-size: $body-font-size;
-        }
+
+    li.is-normal,
+    &.is-normal > li {
+        font-size: $body-font-size;
     }
 
-    &.is-large {
-        li {
-            font-size: $size-large;
-        }
+    li.is-large,
+    &.is-large > li {
+        font-size: $size-large;
+    }
+
+    li.has-radius,
+    &.has-radius > li {
+        border-radius: $radius;
     }
 
     @each $name, $pair in $colors {
@@ -54,26 +53,17 @@ $block-list-separator: 0.25rem !default;
         $color: nth($pair, 1);
         $color-invert: nth($pair, 2);
 
-        &.is-#{$name} {
-            li {
-                background: $color;
-                color: $color-invert;
-            }
-
-            &.is-outlined {
-                li {
-                    background: transparent;
-                    color: $color;
-                    border: 1px solid $color;
-                }
-            }
+        li.is-#{$name},
+        &.is-#{$name} > li {
+            background: $color;
+            color: $color-invert;
 
-            &.has-radius {
-                li {
-                    border-radius: $radius;
-                }
+            &.is-outlined,
+            &.is-outlined > li {
+                background: transparent;
+                color: $color;
+                border: 1px solid $color;
             }
         }
     }
-
 }
\ No newline at end of file
diff --git a/src/demo.scss b/src/demo.scss
index edcdbc7..4b42804 100644
--- a/src/demo.scss
+++ b/src/demo.scss
@@ -1,3 +1,3 @@
 @charset "utf-8";
-@import "node_modules/bulma/bulma.sass";
+@import "node_modules/bulma/bulma";
 @import "block-list.scss";
\ No newline at end of file