Adding CSS styles to an HTML generic control such as <UL> and <LI> in an ASP.NET application

I am struggling to apply CSS to an HTML generic control like <UL> and <LI> with the attribute runat="server" in ASP.NET. Specifically, I need to target the <li> element located within a master page from a content page. Once I locate this control, my goal is to style it using CSS.

<ul id="mainMenu" runat="server" style="width:350px;">
    <li id="mainHome" runat="server"><a title="Home" href="#" class="home">Home</a></li>

    <li id="mainManage" runat="server"><a title="Manage" href="#"
                                          class="manage">Manage</a></li>

    <li id="mainEnquiry" runat="server"><a title="Enquiry" href="#"
                                           class="enquiry">Enquiry</a></li>

    <li id="mainReport" runat="server"><a title="Report" href="#"
                                          class="report">Reports</a></li>
</ul>
c#.netasp.nethtmlcss

Answer №1

Give this a try:

ull.Style.Add("background-color", "Red");

Alternatively, I have tried and tested this method which should work perfectly. Please verify by following these steps:

ull.Attributes.Add("class", "yourClass");

Note: In order to evaluate this solution provided, please do the following:

  1. Create a new blank master page and insert <ul runat="server" id="ull">

  2. Then create a new page and apply the previously created master page.

  3. Select findcontrol ul and add CSS as mentioned in the answer.

  4. Finally, run your page and inspect the HTML source code to find the desired outcome. Like so:

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

Encountering a red squiggly line while working on an Angular 2 project in an HTML file within Visual Studio

Whenever I incorporate Angular 2 code into my HTML files, I notice red squiggly lines appearing like this: https://i.sstatic.net/fhXGu.png Hovering over the red squiggly lines does not reveal any errors or warnings. It may be worth mentioning that I am ...

htmlvisual-studio-2015angularresharper

Matching an apostrophe in an AutoHotkey script using regex

My autohotkey script is designed to search for a word in a bilingual dictionary when I double click on any word within a webpage. However, I am facing an issue where the script also copies the characters preceding the apostrophe when clicking on words like ...

htmlregexescapingautohotkeyapostrophe

The issue I am facing currently revolves around the absence of images on

I recently uploaded a captivating HTML page for my website's captive portal. Although the redirection to the designated page is working perfectly, I am facing an issue with the images included in the HTML page. Even though I went ahead and uploaded th ...

htmlpfsensecaptiveportal

The parameters of a submitted form in JQuery are constantly changing

I attempted to pass a value to another page through the URL. I cannot hardcode it directly in the HTML because I need to gather information from multiple steps first. Therefore, I must modify the form action before it is submitted. Below is the form struc ...

jqueryhtmlforms

How can I navigate to column 3 of an HTML table using XPATH with Selenium Webdriver in Python?

I have extracted the text from the Name column of an HTML table using XPATH, which corresponds to column index [1]. Now, I need to navigate to the 3rd column with index [3] using XPATH, but I'm not sure how to proceed. Here is my current XPATH: //ta ...

csspython-2.7seleniumxpathselenium-webdriver

Struggle for dominance between Bootstrap carousel and Flexslider

Issue with Bootstrap carousel and Flex-slider. When both included, the flex slider does not work properly if I remove bootstrap.js. However, without bootstrap.js, the flex slider works but the carousel malfunctions. Code Snippet: <div class="carousel- ...

jqueryhtmlcsstwitter-bootstrapflexslider

jQuery - "Error: fadeIn is not a valid function"

Encountering an odd issue here. Attempting to execute fadeIn() but receiving the error ".fadeIn is not a function". Here is my code: body { display:none; } <!DOCTYPE html> <html lang="en> <head> <!-- Required meta tags --&g ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Display values from session shopping cart in textboxes within an ASP.NET Gridview

Hey there, I have a GridView set up like this: <asp:GridView ID="productListTable" runat="server" DataSourceID="srcProductListPerCustomer" AutoGenerateColumns="False" AlternatingRowStyle-CssClass="tr_dark" HeaderStyle-CssClass="header_req" BorderWidth ...

asp.netvb.net

What makes the behavior of (display: flex) similar to that of an inherited property?

One thing that puzzles me is the behavior of the display property in CSS. Why is it that setting {display: flex} for a div will apply this style to all nested p elements within the div? It seems like {display: flex} might be an inherited property, but I&ap ...

htmlcssdisplay

Navigating a Data Transfer Object within a Web Service Invocation

When sending a DTO to a web service using JQuery, it's important to understand how to iterate through the object once it is received at the web service call. Below is an example of the code that accomplishes this: JQUERY $(divButtonText).click(funct ...

jqueryasp.net.netweb-services

Normal version with background image and mobile version with background color

Seeking advice on how to optimize my website for mobile devices. I have two separate CSS files - one for the mobile version and one for the desktop version. Combining them in the head of my HTML file is causing issues, as the background style from the desk ...

htmlcssmobile

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

javascripthtmlcsscumulative-sum

The webpage is displaying an error stating that "<function> is not defined."

I recently duplicated a functional web page into a new file on my site. However, after adding a new function and removing some HTML code, the JavaScript function no longer runs when clicking one of the two buttons. Instead, I receive the error message "Beg ...

javascripthtmlfunction

What could be causing the removal of style classes from my element after it is appended?

Could you please explain how it functions? I am attempting to append a div with content using innerHTML and it is working, but without any of the styling classes being applied. const element = document.createElement("div"); element.classList.add("col ...

javascripthtmlbootstrap-5

Query Windows Mobile Broadband connection attributes using C#

To give some context, we have a Windows Forms application developed in C# on the .NET Framework 3.5 that is currently operating on full Windows 7 tablets. These tablets are equipped with a built-in 3G module for data connectivity. The data connection is se ...

c#.netwindowswinformsmobile-broadband-api

How can I customize the color of Chrome's default date and time picker to a different shade of blue?

Is there a way to customize the color of the blue buttons, text, and date indicator in the native datetime picker for Chrome using CSS? https://i.stack.imgur.com/eZSaE.png ...

htmlcssgoogle-chromedatetimepicker

Leveraging async to execute numerous functions

Suppose you have the following code snippet: public async void Init(){ init1(); init2(); init3(); } The first question is, are the methods running asynchronously or not? It's important to note that the methods themselves are declare ...

c#asp.netasp.net-mvcasynchronous

When you hit a certain point on the website, the scrolling momentarily pauses

Upon refreshing the page and scrolling down, I notice that the website experiences a brief lag for a few milliseconds before continuing as normal. Oddly enough, this issue only occurs after refreshing the page. Any suggestions on how to resolve this? Th ...

javascripthtmlcssweb

Using jQuery for slide shows in Ruby on Rails framework

I'm attempting to create a slideshow using jQuery and have the images stored in an array. However, I'm struggling with the implementation of the slideshow functionality. I've checked out 'http://jquery.malsup.com/cycle/' for guidan ...

jquerycssruby-on-railsajax

The alignment of the Div element is incorrect following a fixed video in bootstrap

When I place a div after the video, the div appears on top of the video instead of after it. Additionally, when I change min-width: 100% to width: 100%, the content appears before the video when I resize the browser. body{ font-family: 'Mina', ...

javascriptcsshtmltwitter-bootstrap-3