I need help creating an unordered list in HTML with a CSS class attached to the "ul" element and its child "li" elements. The problem arises when another unordered list becomes a child element of this parent unordered list.
Here is a sample code snippet showcasing my issue:
Javascript:
$(function () {
$('.marquee').marquee({
duration: 10000,
duplicate: false,
delayBeforeStart:0,
allowCss3Support: true,
gap: 600,
});
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
<ul class='marquee'>
<li>1. Longer text lorem ipsum dolor sit amet, <h3>consectetur adipiscing elit END</h3></li>
<li>2. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li>3. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li>4. Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END</li>
<li><ul><li><b>I'm the Child Unordered List Element. I don't want this CSS</b></li></ul></li>
</ul>
CSS:
body {
margin: 10px;
font-family: 'Lato', sans-serif;
}
.marquee {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
background: black;
color: rgb(202, 255, 195);
}
ul.marquee li {
display: inline-block;
padding: 10px 20px;
}
Can anyone suggest how to remove the CSS class "marquee" from the Child Unordered List?
Thank you in advance.