How to style a list in Gutenberg block in Wordpress

Question

I want to incorporate different styles to a list in a Gutenberg block in WordPress. I basically want to change the font-size, spacing between the bullets and change the colour when you hover over an item (Code snippet given below). These styles work in the additional CSS box that get's applied globally, but I want to apply it to a specific list.

 li { font-size :11px;}
 li { margin-bottom: 30px; }
 li:hover { text-shadow: -0.02ex 0 cornflowerblue, 0.02ex 0 cornflowerblue; }

The question is I can't add these functions in any custom CSS class for a Gutenberg block. Trying to apply it manually to an html code, also messes the whole page, even when I'm using the <style scoped> divider.

Answer 1

You can use a CSS class name added in your "Accitional CSS" box and added to the specific "List" block in the editor.

CSS (note the . at the beginning):

.your-special-class-name li { 
  font-size: 11px;
}
.your-special-class-name li { 
  margin-bottom: 30px; 
}
.your-special-class-name li:hover { 
  text-shadow: -0.02ex 0 cornflowerblue, 0.02ex 0 cornflowerblue; 
}

Then, add the your-special-class-name (note the lack of .) class name to the "Additional CSS class(es)" section in the editor. When you have the List block selected, you'll see an "Advanced" section. Open that and you'll find the "Additional CSS class(es)" text input.