Utilize LI styling exclusively for a specific section of the website

Is it possible to style LI items with padding and bullet points only when they are inside the 

<div class="article-content">
element without affecting other ul/li styles on the website such as the navigation menu? Thank you for your help!

.article-content {
      border-bottom: 0px;
      float: left;
      clear: both;
      width: 100%;
      margin-top: 10px;
      padding-right: 10px;
      padding-bottom: 30px;
      padding-left: 10px;
      text-align: justify;
      letter-spacing: 1px;
      color: #1a1a1a;
}

HTML

<p>Blablabla:</p>
<p> Blablabla </p>
<ul>
  <li>dfdd</li>
  <li>dfsdf</li>
  <li>dsf</li>
htmlcss

Answer №1

Styling with CSS:

.content-section ul li {
     padding: 15px;
     list-style-type:square;
}

This solution might meet your needs.

Answer №2

Make sure to target your selector specifically for ul and li elements.

.main-wrapper ul
{
  /*Add your styling here*/
}
.main-wrapper ul li
{
  /*Include your custom styles here*/
}

Answer №3

Here is the recommended HTML structure along with the CSS styling:

HTML :

<div class="article-content">
<p>Lorem ipsum dolor sit amet.</p>
        <p>Consectetur adipiscing elit.</p>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
</div>

CSS :

.article-content {
border-bottom: 0px;
float: left;
clear: both;
width: 100%;
margin-top: 10px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 10px;
text-align: justify;
letter-spacing: 1px;
color: #1a1a1a;

}
.article-content ul
{
 list-style:disc;
 padding-left:10px;
}

Result:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The background gently fades away, directing all attention to the popup form/element

After extensive searching, I have yet to find a straightforward solution that seems to be a standard practice on the web. My goal is to create a form that appears in the center of the screen when a button is clicked using CSS or jQuery. I would like the ...

javascriptjquerycss

List-style-type outside of a table's boundaries

I recently experimented with using <ol> as list elements within a table in order to dynamically insert new table rows. <table> <thead> <tr> <th>head</th> <th>head</th> <th>h ...

javascriptjqueryhtml

How to Retrieve the Current div's ID in VueJS

When using the v-for directive to dynamically generate an id for my div, I need to pass this unique id to a specific function. <div v-for="(item, index) in items" :key="index" :id="'form' + index" > ...

javascripthtmlvue.jsvuejs2vue-component

Eliminate unnecessary spacing from the sticky container

Trying to implement a sticky menu in an angular 14 project using angular material 14 has been quite challenging for me. Initially, I attempted to use the 'fixed' position, but encountered issues where the menu would consistently return to the to ...

htmlcssangularangular-material

Can HTML Elements be used within a Contenteditable section?

I am facing an issue with a contenteditable tag on my website. Users are unable to type code into the tag and have it display as an actual element instead of just text. Is there a way for users to input full, working HTML elements in a contenteditable box ...

javascripthtml

Web page layout featuring fields set aside for completion with underlined formatting

As I work on an HTML document, I encounter a challenge with styling fields that need to be dynamically filled and underlined. Here is what I am aiming to achieve: "Applicant's Last Name:_________bar_____________ First Name:_________foo_____________" ...

htmlcss

Avoid altering the Summernote HTML WYSIWYG editor page due to content CSS

We are currently utilizing the Summernote wysiwyg editor to review and preview html content, some of which contains external stylesheet references. This css not only affects Summernote itself but also alters the styling of the parent page where Summernote ...

javascripthtmlcssrazorsummernote

Modify the parent div's background color on mouseover of the child li

I want to update the background image of a parent div that contains a series of ul li elements. Here is the HTML code I am working with: <section class="list" id="services"> <div class="row"> <ul> <li>& ...

javascriptjqueryhtmlcss

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

I am in the process of developing a drop-down menu that can be clicked. Using my custom AngularJS directive, I have successfully implemented functionality to load menu items dynamically. While I have made significant progress, I have encountered a small i ...

javascriptcssangularjstypescript

Tips for aligning a single item to the center in a Bootstrap navigation bar that has the majority of items on the right

I am attempting to center the text "Welcome:" within the navbar without center aligning the entire navbar. I want the navbar to remain right aligned, but only the "Welcome:" portion should be centered. Here is what I have tried so far... <!DOCTYPE html ...

htmlcssbootstrap-5

eliminate element from array and refresh table

I am facing an issue with my code where I have an array bound to ng-repeat and a button. When the user clicks on the button, I want to remove an element from the array. Here is my current code snippet: var app=angular.module('app',[]); app.con ...

javascripthtmlarraysangularjsangularjs-directive

Implementing websocket functionality in Yii framework

I am currently working on integrating websocket functionality into my web application using PHP and as an extension for Yii. This will allow me to create a notification system similar to what I have in mind. My starting point is the code available at the ...

phphtmlyiiwebsocketyii-extensions

HTML - Align 3 tables horizontally with text below

I have successfully floated 3 tables next to each other using <table style="float:left;">. However, I am facing an issue where some text is being wrapped to the right side of the right-most table instead of being left-justified at the very ...

htmlcss

What might be the reason behind the failure to implement my color class on the text within the <p> element?

I'm looking to streamline my stylesheet to easily change the color of different text elements. I've created a list of general colors that can be applied using classes, like (class="blue") . Here are some examples: .dark-grey { color: #232323; } ...

htmlcss

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

javascripthtmltypescript

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

javascripthtmlcssangularjsng-style

JavaScript code to read a .txt file

Is it possible to use JavaScript to read a text file directly with the file path provided in the code, rather than selecting the file from an open file window? ...

javascripthtml

Tips for styling a button upon being clicked

Is there a CSS technique to make a button change color when clicked with the mouse? I am aware of using ':hover' for changing color, but I need something specific to a left mouse click. I want the same functionality as a standard button but with ...

javascriptjqueryhtmlcss

The overflow:hidden property does not seem to be effective for controlling the display of the

I'm attempting to construct a carousel using a ul element where the li items act as blocks within the ul container. However, I have encountered difficulties with two different approaches where the overflow property does not behave as expected. Approa ...

htmlcssoverflowhtml-lists

Create a CSV document using information from a JSON dataset

My main goal is to create a CSV file from the JSON object retrieved through an Ajax request, The JSON data I receive represents all the entries from a form : https://i.sstatic.net/4fwh2.png I already have a working solution for extracting one field valu ...

javascriptjqueryhtmlajaxcsv