Trying to select the WordPress generated Widget class? - php

Question

Okay, new to WordPress. I have created the wordpress recent posts widget, which has generated a some new WordPress Markup which I am trying to select to add my custom style.
After researching on the web I have found no alternative option other than to go inspect element and find the WordPress html markup selector/ids and write my css for them. (Is there a better way).
Here is my Html for widget:
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<?php
// If the sidebar widget is active i.e. in the admin a widget is been created then show the dynamic sidebar in the markup otherwise waste of markup.
if(is_active_sidebar('recentpost')) {
dynamic_sidebar('recentpost');
}
?>
</ul>
</div>
Note: there is another wordpress generated headline 'Recent Post' that is in color white - is there a title filter?
Here is the wordpress inspect element html markup
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<li id="recent-posts-3" class="widget widget_recent_entries"> <h2 class="widgettitle">Recent Posts</h2>
<ul>
<li>
asdfads
</li>
<li>
Title 2
</li>
<li>
TITLE 1
</li>
</ul>
</li>
</ul>
</div>
Here is me trying to select the Recent Post List id/selector to remove bullets and add style
/* RECENT POST */
.recent-post-wrap {
margin-top: 1rem;
padding: 1rem;
background-color: red;
}
/* list */
.recent-post-wrap ul {
padding: 1rem;
}
.recent-post-wrap ul li {
padding: 2%;
}
.recent-post-wrap a:hover {
background-color: black;
}
#recent-post-headline {
font-size: 1rem;
}
/* Wordpress Recent Post Plugin */
li#recent-posts-3.widget.widget_recent_entries a {
list-style: none;
color: red;
background-color: red;
}

Answer 1

try this
.recent-posts ul {list-style: none;}
or to remove all bullet from ul
ul {list-style: none;}
/* RECENT POST */
.recent-post-wrap {
margin-top: 1rem;
padding: 1rem;
background-color: red;
}
/* list */
.recent-post-wrap ul {
padding: 1rem;
}
.recent-post-wrap ul li {
padding: 2%;
}
.recent-post-wrap a:hover {
background-color: black;
}
#recent-post-headline {
font-size: 1rem;
}
/* Wordpress Recent Post Plugin */
/*li#recent-posts-3.widget.widget_recent_entries a {
list-style: none;
color: red;
background-color: red;
}*/
.recent-posts ul {
list-style: none;
}
.recent-posts ul li a {
color: red;
background-color: yellow;
}
<div class="recent-post-wrap">
<h3 id="recent-post-headline">RECENT POSTS:</h3>
<ul class="recent-posts">
<li id="recent-posts-3" class="widget widget_recent_entries">
<h2 class="widgettitle">Recent Posts</h2>
<ul>
<li>
asdfads
</li>
<li>
Title 2
</li>
<li>
TITLE 1
</li>
</ul>
</li>
</ul>
</div>