Tips for customizing the background color of hyperlinks

Hello, I am trying to figure out how to create a hyperlink with alternating background colors. Can anyone guide me on achieving this?

<div class="left_column">
  <div class="category">
    <p>Category</p>
  </div>
  <ul class="side-link">
  <?php 
  $data=mysql_query("select categoryname from category");
  while($row=mysql_fetch_array($data))
  {
    ?>
    <li><a class="linkbutton" href="#" style="text-decoration:none;"><?php echo $row['categoryname']; ?></a></li>
    <?php
  }
  ?>
  </ul>
</div>
javascripthtmlcss

Answer №1

It's not possible to directly determine if a link is odd or even. However, you can ascertain whether the link is contained within an element that is an odd or even child of its parent:

.side-link li:nth-child(odd) .linkbutton {
    background-color: #F00;
}
.side-link li:nth-child(even) .linkbutton {
    background-color: #080;
}

Answer №2

<div class="left_column">
                    <div class="category">
                        <p>Category</p>
                    </div>
                    <ul class="side-link">


        <?php 
        $data=mysql_query("select categoryname from category");
        $t =0;
        while($row=mysql_fetch_array($data))
        {
            if($t==0){
                $t=1;
            ?>
            <li><a  class ="linkbutton odd" href="#" style="text-decoration:none;"><?php echo $row['categoryname']; ?></a></li>
            <?php
            }else{
                     ?>
    <li><a  class ="linkbutton even" href="#" style="text-decoration:none;"><?php echo $row['categoryname']; ?></a></li>
    <?php
             }

        }
        ?>
    </div>

For styling in CSS:

.odd{
   background-color: red;
}
.even{
 background:green;
}

Answer №3

Incorporate CSS to customize different li elements with unique styles.

.side-link li{
    background:#ff0000;
}

.side-link li:nth-child(even){
    background:#878787;
}

If you wish to style the a, ensure that it is displayed as a block to occupy the li's space effectively.

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

"Get rid of the arrow in Bootstrap's dropdown menu

I'm currently using a bootstrap template that features an accordion menu. However, I have come across a scenario on one section of the page where I do not require the items to expand and show additional text, therefore, I would like to remove the arro ...

htmlcssdrop-down-menubootstrap-5

Issue encountered in AngularJS while configuring resources for the action `query`: Anticipated response was an object, but received an array instead

I've been attempting to utilize Angular 1.3 to access a REST service, but I keep encountering an error stating "Error: error:badcfg Response does not match configured parameter". My suspicion lies in the controller where I invoke $scope.data. Even th ...

javascriptangularjsweb-servicesrestazure

The movement of the Bootstrap navbar brand causes a shift in adjacent elements

Is there a way to use the bootstrap navbar brand without it affecting the layout of other elements? I'd like to have the icon aligned to the left and the navbar elements perfectly centered. Alternatively, is there a way to include the element as a n ...

htmlcsstwitter-bootstrapbootstrap-5

It is not possible to submit a form within a Modal using React Semantic UI

I am working on creating a modal for submitting a form using React semantic UI. However, I am encountering an issue with the submit button not functioning correctly and the answers not being submitted to Google Form even though I have included action={GO ...

javascriptcssreactjssemantic-ui

Encountering Issues with Script functionality on secure websites

I tried running this code on my development machine and it worked perfectly fine over http. However, as soon as I switched to https, it stopped functioning. Any assistance on this matter would be highly appreciated. The code I am using is from zippopotamu ...

javascriptjqueryajax

Sending information (prop) from _app.js to getServerSideProps in a page on the most up-to-date version of NextJS

I have a unique custom _app.js that I created: const CustomLayout = ({ children }) => (children); const myApp = ({ Component, pageProps }) => { pageProps.url = 'another url'; return ( <CustomLayout> <Co ...

javascriptnode.jsreactjsnext.js

Display a JavaScript object as a table in an HTML document using HTML elements

I am having trouble displaying the results of sorting an associative array in JavaScript in an HTML table without using PHP. The sorting itself is working correctly as I can see the results in the console, but the table is not showing up. Below is the code ...

javascripthtmlarrayshtml-table

Tips for maintaining state URL persistence after a page refresh in Next.js 13 when utilizing next-usequerystate

Currently, I am using the next-usequerystate library with Next Js 13. However, I have encountered an issue where the state on the URL is lost when I refresh the page. The initial URL looks like this: localhost:3000/?page=1&genres=tree But upon refres ...

javascriptreactjsnext.jsnext.js13nextjs-dynamic-routing

What is the best way to make AngularJS acknowledge invalid input that has already been identified by the browser?

Encountering an issue (specifically in Chrome) where a number input is deemed invalid by the browser, but valid as per Angular. <form name="form_name"> <input type="number" step="any" id="a_number" name="a_number" min="0" ng:model="aN ...

javascripthtmlangularjsvalidation

A method parameter in an MVC controller can be bound to HTML form properties by following these steps

Struggling to bind a controller post method to a basic HTML form on the view. Trying to understand how to populate the parameter and call the method using form data. Controller method: [HttpPost("addcomment")] public JsonResult AddCommen ...

javascriptc#htmlajaxmodel-view-controller

Incorporate the teachings of removing the nullable object key when its value is anything but 'true'

When working with Angular, I have encountered a scenario where my interface includes a nullable boolean property. However, as a developer and maintainer of the system, I know that this property only serves a purpose when it is set to 'true'. Henc ...

javascriptangulartypescript

Tips for displaying the node's label in Arbor js when hovering over the node

I'm currently utilizing Arbor Javascript to exhibit a graph composed of nodes and edges. My objective is to have the node's label displayed when the mouse hovers over it within the graph. Below is the code snippet I am working with: <canvas i ...

javascripthtmljsonarbor.js

Having trouble retrieving submitted data in Django after making an Ajax post

This is a sample HTML page: <div> <form id="assignment_form" action="/submit-assignments/" method="post" accept-charset="utf-8"> {% csrf_token %} <!-- Fields here --> <select id="user_list" multiple='multiple' si ...

jqueryhtmlajaxdjango

The AngularJS error message [$rootScope:infdig] is triggered when the number of $digest() iterations exceeds 10 due to a window

It's evident that changing window.location.href/reload to $location.path() resolves the issue. However, using $location.path breaks the app in IE but works in Chrome with window. The purpose behind this is to update a site when a user logs in or out, ...

javascriptangularjswindow.location

Unable to retrieve fileReader result value within AngularJS service

I am currently in the process of developing a service that reads image files from an HTML input element. The goal of this service is to return the HTML img object with the updated attribute containing the base64 string of the read image file. Below is the ...

javascriptangularjsimageservicecontroller

Receiving "this" as an undefined value within the TypeScript class

Currently developing a rest api using express.js, typescript, and typeorm. Initially thought the issue was with AppDataSource, but it seems to be functioning properly. Below is my controller class: import { RequestWithBody } from '@utils/types/reque ...

javascriptnode.jstypescriptexpress

Angular JS Introductory Module

Currently, I am encountering an issue in AngularJS 1.2.15 marked by $injector:modulerr. Interestingly, the application runs smoothly when hosted on a MAMP Apache server locally, but encounters errors when running on a node server, generating the error mess ...

javascriptnode.jsangularjs

Switch up a font style using JavaScript to apply a Google font effect

I am attempting to implement a discreet hidden button on a website that triggers a unique Google font effect for all of the h1 elements displayed on the page. However, I am uncertain about the process and unsure if it is achievable. Below is the code snipp ...

javascriptjquerygoogle-font-api

Utilizing Python for Extracting Data from the NFL Section on ESPN's Website

Looking to extract historical NFL game results from the ESPN website using Python for further analysis? Currently, facing an issue with adding dates to the extracted data before saving it in a CSV file. Below you can find the link to the NFL webpage where ...

pythonhtmlweb-scrapingbeautifulsoup

ng-display does not display content when the condition switches to true

I am facing an issue with displaying an image and a YouTube video in my HTML. My goal is to show the image when the video is not playing, and switch to displaying the video when it starts playing. Upon loading the page, only the image is shown, which is ...

javascripthtmlangularjs