Setting CSS property for ul and li in class

Question

I am trying to set properties of the ul and li items within a class but it's not working. This is for the wordpress jetpack social media icons.

I have

.widget_wpcom_social_media_icons_widget .genericon {
    font-size: 21px;
}

.widget_wpcom_social_media_icons_widget ul {
    list-style-type: none;
}

.widget_wpcom_social_media_icons_widget li.menu-item {
    margin-right: 100px;
}

Only the first one, setting the size, seems to work. The others don't. The second one is to remove the bullets before the media icons and the second one is to add a space between the icons as the icons are inside span blocks. Why are they not working?

Are the styles being applied, but overridden by a previous yet further defined selector? — jeffjenx, Dec 18 '15 at 22:17

score 1 · Answer 1 · answered Dec 18 '15 at 22:26

To remove bullet points use

.widget_wpcom_social_media_icons_widget ul li {
list-style: none; }

You cannot give margin to a span since it is a inline level element, instead you can make the .menu-item as inline block and give margin this way

.widget_wpcom_social_media_icons_widget li.menu-item {
display:inline-block;
margin-right: 100px;}

Setting CSS property for ul and li in class

1 Answers1