The Bootstrap 4 carousel link takes precedence over any other links on the page

Is anyone else experiencing this issue? I have three different link colors.

.custom-links > a, a:link, a:hover, a:visited {
    color: black;
}

.carousel-caption > a, a:link, a:hover, a:visited, a:active {
    color: white;
}

.rss-links > a, a:link, a:hover, a:visited, a:active {
    color: gray;
}

<div class="carousel-caption">
                            <h1>@slides.SlideTitle</h1>
                            @if (!string.IsNullOrEmpty(slides.SlideUrl))
                            {
                                <p class="caption-link"><a href="@slides.SlideUrl">@slides.SlideSubTitle</a></p>
                            }
                            else
                            {
                                <p>@slides.SlideSubTitle</p>
                            }

                        </div>

<div class="rss-links">
                    <a href="@item.LinkToSource">Read More</a>
                </div>

<div class="col-md-6 link-padding custom-links">
                    <a class="btn btn-warning btn-block" href="@link.Url">@link.Name</a>
                </div>

Added more links

No matter what I do, the styles of carousel-caption seem to be overriding my other two links. Am I overlooking something here?

cssbootstrap-4

Answer №1

There seem to be several issues with your code

Your use of the > selector, also known as the direct descendant selector, is incorrect in this context. Specifying .carousel-caption > a suggests that you are targeting an a element that is a direct child of the .carousel-caption, which is not the case according to the HTML structure where a appears to be a direct descendant of p.caption-link.

Additionally, the CSS rule 

.carousel-caption > a, a:link, a:hover, a:visited, a:active { color: white;}
selects both the direct descendant a (as previously mentioned) and all other states of a elements throughout the entire document due to the lack of specific selectors before them.

To address these issues, you should consider revising your code as follows:

.custom-links a {
  color: black;
}

.carousel-caption a{
  color: red; /* update to white */
}

.rss-links a{
  color: gray;
}
<div class="carousel-caption">
  <p class="caption-link"><a href="#">this is the carousel link</a></p>
</div>
<div class="rss-links">
  <a href="@item.LinkToSource">Read More</a>
</div>

<div class="col-md-6 link-padding custom-links">
  <a class="btn btn-warning btn-block" href="@link.Url">@link.Name</a>
</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

Center alignment of text and images within the button's image

Can someone help me format my CSS properly? I have a button image where the text should be on the left side and another image on the right side. Currently, everything is centered. Thank you in advance. Here is the current code: button { /* padding- ...

htmlcss

I came across a small piece of CSS code that isn't functioning properly when tested on jsfiddle

I'm on the hunt for a cool "typing animation" with three dots. Stumbled upon this gem online -> https://codepen.io/mattonit/pen/vLoddq The issue is, it doesn't seem to work for me. I even tried it on jsfiddle and it just stops working. I att ...

css

Tips for preventing line breaks within table cells

Looking at the image below, I need to display the Hallticket in a single line. The first one is retrieved directly from the database, while the second one is added dynamically using JavaScript. How can I show both sets of data in a single line? https://i. ...

javascriptphpjqueryhtmlcss

The layout created with Tailwind did not meet our expectations in terms of the value obtained

Choose the shape you desire. Click here to view image The current shape looks like this... Click here to view image bar : h-14 nav : h-full content : h-full footer : h-14 I am trying to create a layout similar to this using tailwind CSS, but it's no ...

cssreactjslayouttailwind-css

Having trouble with CSS Locator identifying an element in your Protractor Test?

In the Protractor test snippet below, I am attempting to calculate the quantity of div elements using the CSS locator: let list = element.all(by.css('div[class="ag-header-cell ag-header-cell-sortable"]')); expect(list.count()).toBe(11); ...

cssangularjasmineprotractor

Achieving perfect alignment in a CSS grid for form elements vertically

One of my current projects involves creating a form layout using HTML and CSS that follows a Material Design style: <div class="form-group"> <input type="text" id="feedName" name="name" value={nameValue} onChange={this.handl ...

htmlcsscenteringcss-grid

Connecting Bootstrap Tabs Dropdown to Website LinksIncorporating Bootstrap Tabs Dropdown Menu

Having an issue with my dropdown list in the Twitter Bootstrap tab - it's not responding when clicked. I've checked Stackoverflow for solutions but nothing has worked so far. I even tried removing the data-toggle='tab' attribute. Just ...

javascripthtmlcsstwitter-bootstrap

Set the style properties of one class to match the style properties of another class using JavaScript

I need to dynamically create a div using the Bootstrap panel for displaying it. The div's class will either be "panel panel-success" or "panel panel-danger" based on the server response, which can be either "success" or "failure." To assign the class ...

javascripthtmlcsstwitter-bootstrap

The functionality of CSS3 animations may sometimes be unreliable following the onLoad event

Here is a snippet of code to consider: $(function() { $('#item').css({ webkitTransform: 'translate(100px, 100px)' }); }); The element I am attempting to move has the following CSS properties: transform: translate3d(0 ...

javascriptjquerycsstransform

Retrieve image details and display them in the console when the page is resized

Query: How can I retrieve and monitor the src, width, and height of all images on a webpage and display this information in the console whenever the page's size changes? Sample Code Snippet: var images = document.getElementsByTagName('img' ...

javascriptcssimage

The Bootstrap Dynamic Navbar is not adjusting for mobile devices because of the addition of a logo

Struggling to incorporate a logo into the navbar of my website. It looks good on larger screens, but causes the navbar to break on smaller screens. View without the logo: Click Here View with the logo and resizing issues: Click Here I think I can make th ...

htmlcsstwitter-bootstrap

Is there a method to achieve a similar effect as col-md and col-sm but for adjusting height instead?

I'm looking for a way to adjust the height based on the device size like how sm, md, and lg classes work. I'm designing a login form that looks great on cell phones, but appears too tall with excessive spacing when viewed on an iPad. There are la ...

htmlcsssassbootstrap-4flexbox

The navigation bar vanishes as soon as I click the Modal button

I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...

htmlcssnavbarbootstrap-5bootstrap5-modal

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

javascripthtmlcssformsanimation

CSS - owl carousel automatically stretches images to full width

Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...

javascripthtmlcss

What is the best way to level out the content in the article using CSS and HTML?

Can anyone help me with CSS and HTML? I have a travel blog and I want to include a related post section similar to Time.com in my articles, but I'm facing an issue. What do I need to achieve this? I want to create a section that looks like the relat ...

htmlcsswordpress

Can JQuery be used to specifically target attributes with vendor prefixes?

Is there a way to change the Thumb color for my slider without needing to select the thumb with a vendor prefix? I want to be able to dynamically pick the color without simply appending a class. $('.button').on('click', function (e) { ...

javascriptjqueryhtmlcss

Styling Your Navigation Bar with CSS and Active States

Creating an interactive navigation element for a menu can be challenging, but here's a helpful example. http://jsfiddle.net/6nEB6/38/ <ul> <li><a href="" title="Home">Home</a></li> <li class="activ ...

javascriptjqueryhtmlcss

Arranging two divs side by side while considering a responsive theme

My struggle with aligning divs side by side continues. After searching through online forums for hours, I have yet to find a solution. The goal is to create a collage using six images. However, currently all the images stack vertically on the left side on ...

htmlcsslayoutalignment

When the mouse hovers over the slider, the final image jumps into view

After successfully building an image slider that displays 2 partial images and 1 full image on hover, I encountered a bug when setting the last image to its full width by default. This caused a temporary gap in the slider as the other images were hovered o ...

javascriptjqueryhtmlcss