Attempting to apply styles to an unordered list within a division using CSS, without the ability to define a class

<div class="facetwp-selections">
  <ul>
    <li data-facet="countries">USA</li>
    <li data-facet="countries">UK</li>
    <li data-facet="countries">Germany</li>
  </ul>
</div>

I am attempting to remove the indentation.

Ordinarily, this can be easily achieved with:

ul {
    padding: 0;
}

However, there are other UL elements on the same page and I cannot assign a specific class to the UL I want to target.

I thought this selector would work, but it didn't:

ul.facetwp-selections {
    padding: 0;
}

I also tried this alternative:

facetwp-selections.ul {
    padding: 0;
}

Is there another way to target the UL within the parent DIV?

Thank you

Answer №1

.facetwp-selections > ul{
    padding: 0;
  
}
<div class="facetwp-selections">
  <ul>
    <li data-facet="countries">USA</li>
    <li data-facet="countries">UK</li>
    <li data-facet="countries">Germany</li>
  </ul>
</div>
<div class="facetwp-selections2">
  <ul>
    <li data-facet="countries">USA</li>
    <li data-facet="countries">UK</li>
    <li data-facet="countries">Germany</li>
  </ul>
</div>

you can use this code as a reference for CSS styling of parent and child elements. For more information, check outCSS rules for parents and children

For a working example, you can visit this fiddle link

Answer №2

Consider the following CSS for styling:

.facetwp-selections ul {
  padding: 0;
}

.facetwp-selections ul {
  padding: 0;
}
<div class="facetwp-selections">
  <ul>
    <li data-facet="countries">USA</li>
    <li data-facet="countries">UK</li>
    <li data-facet="countries">Germany</li>
  </ul>
</div>

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

What is the best way to calculate precise pixel dimensions for mobile devices?

Upon inspecting the browser's developer tool, it indicates that the resolution of an iPhone X is 375*812, although this may not be the actual resolution. While CSS pixels do not always align perfectly with display resolution, the question remains - If ...

Does HTML5 officially provide the speechsynthesis API for users?

Can someone clarify if speech synthesis is officially supported by HTML5 for converting text-to-speech? ...

What is the best way to center align two inner divs within a container?

I've been working on achieving the following design: https://i.sstatic.net/ckC3j.png Just to clarify, the dashed line represents a guide indicating that both .inner-a and .inner-b are aligned in the middle horizontally and vertically within the imag ...

Leveraging CSS nth-child selector in conjunction with ngFor in angular2

Looking for a way to style odd and even rows differently in my dynamically generated table using ngFor directive in angular2. *ngIf="AreThereMyOldMessages" *ngFor="let oldm of MyOldMessages;let i=index" *ngIf="AreThereMyNe ...

Does the 'span' element negatively impact the vertical alignment of text?

While working on my code, I noticed an issue with vertical alignment when using span tags to change the background of the text based on its content. The problem occurs specifically when viewing the code in the Android Chrome browser. You can view the initi ...

Enhancing the camera functionality of the HTML <input> tag for iPhone and Android devices

I am currently working on a mobile web application that requires access to the device's camera. I am aware that this can be achieved using the following code: <input type="file" accept="image/*" capture="camera" /> The code snippet above suc ...

Exploring Next.js Font Styling and Utilizing CSS Variables

I'm attempting to implement the "next" method for adding fonts, but I find the process described quite complex just to preload a font. I experimented with exporting a function to create the font and then using a variable tag to generate a CSS variabl ...

Using PHP to create a REST API that returns JSON data for webpages

I'm in the process of building a PHP restful API that currently returns JSON responses for native mobile app use (iOS/Android). My query is whether the same restful API can also be utilized for website purposes, or if I should include support for HTM ...

What is the best way to manage responsive Bootstrap 3 tables that contain a lot of content?

Currently, I am working on a Wordpress plugin that features a Bootstrap 3 responsive table. However, the challenge lies in the fact that the content within the table data cells is more than just a few words. This specific table consists of three columns: ...

When attempting to add a new row to a table, the function fails to function properly

I am facing an issue with my dynamic HTML table. Each row in the table should have two cells whose values are multiplied together. I have created a function to achieve this, but it only works on the first row of the table and not on any new rows added by c ...

Adjusting the size of an image within a div container alongside additional elements

How can I ensure that an image and variable text inside a div do not exceed the height of the parent div?The image should resize based on the amount of text present. In the code snippet below, the image occupies the full height of the div (30vh) with text ...

What is the best way to switch image position using javascript?

I'm experimenting with creating a function that toggles the image source when clicked - changing it back and forth. <img src="http://images.clipartpanda.com/laughing-smiley-face-clip-art-smiley-face-clip-art10.jpeg" longdesc="http://sm ...

issues with the styling and scripts within the jsp document

During my project work, I encountered an issue with the front end as shown in the image below. https://i.sstatic.net/gLIUr.png Upon loading the project, all styles and scripts disappear completely. How can I resolve this issue promptly? I attempted to up ...

Is there a way to leverage the extensive Bootstrap 5 color palette within an Angular application?

Currently working on a project in Angular 12 with Bootstrap 5 and SCSS, I'm facing a challenge in utilizing the new extended Bootstrap 5 color palette such as indigo-300 or pink-200. I'm not sure if I need to import them in a certain way or how t ...

Keys stored in the local storage lists

Can someone guide me on how to format the keys as numbers (1, 2, 3...) in this code snippet: <input type='text' id='provedor' /> <input type='text' id='login' /> <input type='text' id=&a ...

Jquery animate not working properly after closing the div for the first time

I am currently working with a div that utilizes the .animate function. The CSS for the div is set as follows: position:fixed; bottom:-240px; The associated animate script looks like this: $("#media").click(function () { $("#mediadetails").animate({ ...

Is there an issue with the vertical alignment of two adjacent empty inline blocks?

body { border: 2px solid black; height: 100px; } div { vertical-align: middle; display: inline-block; width: 50px; height: 50px; } .a { border: 2px solid red; margin-top: 20px; } .b { border: 2px solid green; } <!DOCTYPE html> & ...

I'm having trouble getting my modal to open, it just displays the information on my page instead

I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it pop ...

Sending a C# variable to an HTML file

I’m struggling to understand how I can use jQuery to access a variable from C# named sqlReq. My main objective is to be able to input my own SQL data into a PieChart. However, I’m unsure about how to call and define C# SQL requests in HTML or jQuery. ...

Looking to screen usernames that allow for the use of the DOT (.), underscore (_), and Dash (-)?

I am using jQuery to filter usernames that are exactly 3 characters long. The validation criteria includes only allowing the following special characters: ., _, and - var filter = /^[a-zA-Z0-9]+$/; Therefore: if (filter.test(currentval)) { //valid ...