Style applied directly to .col elements

I want to customize the styling of the .col elements on a single page without affecting other pages. I've tried adding the following code snippet to my CSS file:

.col {
        border: 1px solid #7851A9;
      }

However, this also styles the elements on other pages, which is not what I intended. I attempted to style them inline, but it didn't work. I suspect there might be an issue with my syntax. Furthermore, inline styling is not considered best practice.

How can I create a specific CSS rule that targets only certain .col elements and not all of them? I realize this is a basic CSS question, but I've spent hours experimenting with different approaches without success so far.

<div ng-repeat="module in modules">
            <div class="row">
                <div class="col" style="border: 1px solid #7851A;" ><h5 style="color:#000000;text-align:center;">{{module}}</h5></div>
            </div>
            <div class="row">
                <div class="col col-50" style="border:1px;"><h5 style="color:#000000;text-align:center;">Module Mark</h5></div>
                <div class="col col-50" style="border:1px solid #7851A;"><h5 style="color:#000000;text-align:center;">{{GenerateRandomMarks[$index]}}</h5></div>
            </div>
            <br>
            <br>
        </div>

Answer №1

Here is a suggestion for you:

.mycol {
        border: 1px solid #7851A9;
      }

<div ng-repeat="module in modules">
            <div class="row">
                <div class="col mycol" ><h5 style="color:#000000;text-align:center;">{{module}}</h5></div>
            </div>
            <div class="row">
            <div class="col col-50" style="border:1px;"><h5 style="color:#000000;text-align:center;">Module Mark</h5></div>
                <div class="col col-50" style="border:1px solid #7851A;"><h5 style="color:#000000;text-align:center;">{{GenerateRandomMarks[$index]}}</h5>      </div>
            </div>
            <br>
           <br>
       </div>

Answer №2

To customize the appearance of a specific page, assign it a body class such as "custom-style" and apply styling to elements within that class like so:

.custom-style .element { color: #333; font-size: 14px; }

Remember to remove any other inline styles and transfer them to your main stylesheet or the ".custom-style" sheet if you want them exclusive to this particular page.

Answer №3

Why not add an additional class next to col on that particular page? Like

<div class="col specificStyle"></div>

and then use

.specificStyle {
    color: red;
}

These styles will take precedence over .col if you define them in the same manner.

Answer №4

To add a unique style to elements on a specific page, insert a class within the <body tag of that page, for example:

<body class="page5">

Next, create a CSS rule using a combined selector: The body class and your .col class, like this:

.page5 .col {
   border: 1px solid #7851A9;
 }

This way, the specified style will only be applied to the elements with the .col class on that particular page.

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

I'm wondering why my element is aligning itself with its sibling. It seems that when the parent has overflow set to hidden, it causes the children's

Let me break down the diagram below for you: The main box is marked in yellow and serves as the parent element. Within this parent box, there are two child elements, one in black and one in cyan. To hide any excess content of the cyan box that overfl ...

Personalize your hr tag

https://i.stack.imgur.com/9lumC.png Is there a way to create an hr line that looks exactly like the image above? I attempted using clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) but it didn't work .divider { color:#1D0000; ...

Utilizing JQuery's $(document).ready() function following a window.location change

I'm having trouble getting a JavaScript function to run after being redirected to a specific page like "example.com" when the DOM is ready for it to work with. Unfortunately, it seems that $(document).ready() is running before "example.com" finishes l ...

Preloading videos for optimal performance on mobile devices

Looking for a solution where 4 MP4/video files, each 5MB in size, can be played consecutively without gaps between them on all browsers and devices. Preferably not looking for a solution involving the replacement of video source files. The current approac ...

Steps to center an HTML canvas on the screen

I attempted to center my canvas horizontally using <div style="text-align:center;">, but the y axis remains unchanged. How can I position the HTML canvas in the center of both the x and y axes? Any suggestions on how to achieve this alignm ...

Toggle the hamburger menu using JavaScript

How can I close my hamburger menu when clicking a link for one page navigation? The menu is functioning properly, but I need a way to close it. Unfortunately, I have limited knowledge of JS. I only have the HTML and CSS for this: HTML in index.html file ...

The addition operation in JavaScript seems to be malfunctioning as it is not adding up my values

After encountering an issue with calculating the number of payments, I discovered that the addition operator was not functioning as expected. Instead of summing up values, it was treating them as strings. For instance, when trying to add 3 and 5, the out ...

What is the best way to attach a function to an href attribute for creating a dynamic link?

I've been struggling to pass a function to the href attribute in my link tag, but no matter what I try, it just doesn't seem to work. It either redirects to a 404 page or is completely unclickable. What could be causing this issue? This link app ...

Using jquery and Ajax to extract data from nested JSON structures

Need help with modifying a code snippet for parsing nested JSON format [ { "name":"Barot Bellingham", "shortname":"Barot_Bellingham", "reknown":"Royal Academy of Painting and Sculpture", "bio":"Barot has just finished his final year at T ...

Establishing the REM value for all CSS properties

My goal is to implement the use of rem units throughout my website. However, relying on the standard rem-to-px conversion rate doesn't feel very intuitive: 10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem (base) 18px = 1.125rem 20px = 1.25r ...

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

Incorporating Bootstrap into a fresh project

I'm completely new to the world of development, so I'll do my best to phrase this question correctly! Last month, I successfully created my first web application using RoR and Bootstrap for some visual enhancements. Currently, I am working on a ...

Troubleshooting Problem with Responsive Bootstrap Navbar

I've been working on creating a menubar using Bootstrap where the logo image is centered instead of being on the left side of the bar. However, I'm facing an issue where the right links in the menu go off the screen. When I view the page with a w ...

Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Why is my mobile menu not functioning correctly? The submenu should open on the first click and redirect to the parent URL on the second click, which works fine. However, when the window width increases to 768px or more, the submenu should appear on hover ...

What exactly does the <cbn-root> HTML element signify, and how can it be parsed using Java programming language?

I attempted to develop a Java program to monitor the availability of reserved spots on this website: However, when I examine the page source using Chrome or Edge, only <cbn-root></cbn-root> is displayed in the body section. Yet, utilizing Chro ...

Leveraging AngularJS to fetch data from two distinct JSON files

I am faced with the challenge of incorporating 2 JSON file examples into my project. The format of each file is different, so I am exploring the best approach using an angular controller to handle them effectively. These JSON files are not being fetched fr ...

In React Native, changing the translation of an element causes it to shift below all other elements, regardless of

Check out this sandbox project: I'm trying to create a simple animation using translation in React Native, but I'm facing an issue where when I move the element to the right and down, it goes under other elements. However, if I move it left and ...

Discover the hidden content within a div by hovering over it

Here is an example of a div: <div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tinc ...

Tips for extracting data from cells within an HTML table using JavaScript

I am looking to extract the values from a cell of an HTML table in order to store them in a MySQL table using PHP. I prefer to utilize JavaScript instead of jQuery. I have assigned a unique ID to each TR based on the ID field in the MySQL table. Additiona ...

Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property. Below is the code snippet that ...