2 unique personalized classes with individualized modifications

Is it feasible to create 2 distinct custom (a tag) classes, each with unique class names?

For Instance:

When I try to use these in my HTML code, I struggle to create 2 different styles for (a tag) with different names!

<a class="type1" href="#">test1</a>
<a class="type2" href="#">test2</a>

How can I have 2 instances, with different names for these? Where should I apply type1 and type2?

<style>

a.type1:link {color:#FFFFFF;}
a.type1:visited {color:#70B6F2;}
a.type1:hover {color:#70B6F2;}
a.type1:active {color:#70B6F2;}

a.type2:link {text-decoration:none;}
a.type2:visited {text-decoration:none;}
a.type2:hover {text-decoration:none;}
a.type2:active {text-decoration:none;}

</style>

Thanks

htmlcss

Answer №1

Check this out:

.link-type1 {color:#FFFFFF;}
.link-type1:visited {color:#70B6F2;}
.link-type1:hover {color:#70B6F2;}
.link-type1:active {color:#70B6F2;}

.link-type2 {text-decoration:none;}
.link-type2:visited {text-decoration:none;}
.link-type2:hover {text-decoration:none;}
.link-type2:active {text-decoration:none;}

View demo here.

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

JQuery script fails to load in the head section while dynamically generating an HTML page with JavaScript

Using JavaScript, I have created a new window dynamically and added some HTML code to it. However, when I try to insert a script link into the HTML head, it fails to load when the window is open. <script type="text/javascript"> function newWindo ...

javascriptjqueryhtml

Is there a way to hide an HTML element from view while still allowing it to be found by the browser?

Scenario: A collection of cards with hidden names, but still necessary to search by name Picture album cards without any album names visible, only the images, yet still searchable using Ctrl+F Is there a particular feature or CSS code that would enabl ...

htmlcssbrowser

Is there a way to target a button within an anchor tag without relying on a specific id attribute?

On my webpage, I have buttons that are generated dynamically using PHP from a MySQL table. Each button is wrapped in an anchor tag and when clicked, it triggers a Javascript function to carry out multiple tasks. One of these tasks requires extracting the ...

javascriptphpjqueryhtml

Customize the appearance of polygons in OpenLayers 2 by adjusting the fill color and opacity

I am aiming to use different fill colors and opacity values for various shapes (such as Triangle, Circle, Square, Hexagon, etc.). Although I can draw the shapes, set different titles, and stroke colors with the code below, I'm struggling to define th ...

javascripthtmlcssopenlayers

Using pure CSS to style sibling span elements in a unique color

Looking to change the color of a specific span based on the title attribute of another span in a different div. The code below successfully turns text2 red if it has the title of "Red". span[title=Red] ~ span { color: red; } <span title="Red" ...

htmlcss

Instructions for capturing multi-dimensional arrays using forms in Vue

I have a snippet of code that looks like this: <div class="form-item"> <label for="list-0"><?php _e('List 0', 'test'); ?></label> <input name="list[0]" type="text" id="list-0" value=""> </div> &l ...

javascripthtmlformsvue.js

CSS Styling Dropdown Menu for Internet Explorer 5 and Internet Explorer 11

I am encountering an issue with a select box that is coded as follows: <html:select property="list_data" size="12" style="width: 350px;" ondblclick="JavaScript:doOK()"> <html:optionsCollection property="list_data" label="codeAndNameLabel" val ...

htmlcssinternet-explorer-11

Is there a way to verify the existence of an element based on its class name?

In the title of my question, I mentioned that my element lacks an id attribute. So how can I determine if it exists or not? Here is the HTML code: <div class="classname">something</div> Note1: If there was an id attribute like this: var el ...

javascriptjqueryhtml

Modify the h:outputText value dynamically with the power of jQuery!

Is it possible to use jQuery to dynamically change the value of my OutputText component? This is the code snippet for my component: <h:outputText id="txt_pay_days" value="0" binding="#{Attendance_Calculation.txt_pay_days}"/> I would apprecia ...

javascriptjqueryhtmljsf

The SVG animation is reversing and decreasing in size from the bottom

Feeling lost, I spent a day searching without success. I have a project in full Vuejs and I thought using Svg would be easy and fun, but I can't figure out why the image resizes when playing an animation. The bottom of the svg seems to resize and get ...

cssvue.jsanimationsvg

Modifying the font style within an ePub document can affect the page count displayed in a UIWebView

Currently in the development phase of my epubReader app. Utilizing CSS to customize the font style within UIWebView, however encountering a challenge with the fixed font size causing fluctuations in the number of pages when changing the font style. Seeki ...

javascripthtmlioscssxhtml

You can use AJAX, JQuery, or JavaScript in PHP to upload a total of 7 files by utilizing 7 individual file input

My client has a unique request - they want to be able to upload a file in PHP without using the traditional <form> tag or a submit button. While I am familiar with file uploads in PHP, I am unsure of how to achieve this without utilizing the <for ...

javascriptphpjqueryhtmlajax

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

csshtmlright-to-left

Using the if-else statement in an email form: A step-by-step guide

I have successfully created an email form, but now I want to enhance it by adding options for the subject field. If the subject is set to cancel, then a cancel message like your service is cancelled should be displayed in the Message (body) field. On the o ...

c#htmldjangoasp.net-mvc

How to vertically center align h1 using Bootstrap

<body> <nav class="navbar navbar-expand-md bg-dark navbar-dark py-3"> <div class="container"> <div class="navbar-brand mx-auto"><h2 style="color: white;">Name< ...

htmlcssbootstrap-4

Creating interactive tooltips in Shiny applications with the help of ShinyBS

I am attempting to incorporate the shinyBS package into my basic app. My goal is to generate dynamic tooltip text based on each radioButton selection. To better illustrate my issue, I have drafted a simple code snippet in HTML & JS. While I came acro ...

javascripthtmlrshinyshinybs

What is the best way to center CSS content such as boxes and text?

As a beginner in CSS tutorials, I am seeking guidance on how to center the entire content in the browser. Below is the CSS code that needs attention. Additionally, there is a screenshot of the current output included for reference. body { background:#E9 ...

phpcsshtml

Can simply adding Bootstrap CDN make a website responsive?

Is Bootstrap truly self-sufficient when it comes to responsive design, or do custom webpages utilizing Bootstrap require additional responsive instructions? If I incorporate the Bootstrap CDN and utilize its built-in components, can I assume the webpage ...

csshtmltwitter-bootstrapcdn

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

htmlcss

I am eager to run the code that I retrieved from the server. I have access to the code in my console and I desire for it to execute on the main browser page

Currently, I have a simple Google Chrome Extension that includes a button. By using AJAX, I am fetching a script from a server in my browser's console. Essentially, clicking on the extension reveals a button which, when clicked, fetches the script fro ...

javascripthtmlcssajaxgoogle-chrome-extension