The text in the <p> tag will remain the same color

I am encountering an issue with changing the color in the <p> tags within the code snippet below. Specifically, I am trying to change the TITLE text to gray but have been unsuccessful so far.

If anyone could provide assistance on this matter, it would be greatly appreciated!

HTML:

<div class="rec-anime-list-container">
<ul class="rec-anime-list container">
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120xTITLE80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>     
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>    
</ul>​​​​​​​​​​​​​​

CSS:

.rec-anime-list-container {
    float:right;
    text-decoration: none;
}
.rec-anime-list {
    max-width: 480px;
}
.container li{
    float:left;
    width:230px;
    margin-right:10px;
    margin-bottom: 10px;
}
.column {
    display:inline-block;
    vertical-align:middle
}
.rightcol {
    width:100px;
}​
.rec-anime-title {
    color:gray;
}
.sub {
    color:blue;
    font-size:16px;
}
.dub {
    color:red;
}
htmlcsstext

Answer №1

In the .right-col definition, there seems to be a strange invisible character at the end that is causing the parser to skip the next rule. This issue does not affect the previous answer because of this. To fix it, simply remove the problematic character and double-check for any additional keystrokes or use an editor that highlights all characters, including hidden ones.

Answer №2

It seems like your HTML code is flawless, but the issue lies in your CSS. When I tested the code on my computer, I didn't see the P tag text in grey color as expected. After making some changes to the code, it started working perfectly.

I found that removing the .rightcol class and adjusting the width of the .rec-anime-title class solved the problem

**

.rec-anime-list-container {
    float:center;
    text-decoration: none;
}
.rec-anime-list {
    max-width: 480px;
}
.container li{
    float:left;
    width:230px;
    margin-right:10px;
    margin-bottom: 10px;
}
.column {
    display:inline-block;
    vertical-align:middle
}
.rec-anime-title
{
color:grey;
width:100px;
}
.sub {
    color:blue;
    font-size:16px;
}
.dub {
    color:red;
}
<html>
<head>
  <body>
<div class="rec-anime-list-container">
<ul class="rec-anime-list container">
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120xTITLE80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">Deep parekh</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li> 
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>     
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>
    <li>
        <a href="#">
            <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div></a>
            <div class="column rightcol"><p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong></div>
    </li>    
</ul>

</body>
</html>

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

Using the power of HTML5, store data locally on

I am curious about the possibility of using local storage on a different page. I want to track clicks made on one page and display it on another, but I'm not sure how to go about it or if it's even feasible. Any help you can provide would be grea ...

javascripthtml

Clicking on the ajax tab control in asp.net displays a single rectangular box - how can this be removed?

When using tab control in Ajax, I encountered an issue where a blue rectangle box appeared when clicking or opening the page. How can I remove this unwanted box? ...

javascriptjquerycssasp.netajax

What is the best way to position text at the bottom of an image using CSS?

Utilizing the jQuery Caption Plugin to showcase the image alt text when hovering over an image. Currently, the text is displaying at the top but I would like it to show at the bottom. Any suggestions on how to remedy this? Desired Outcome: Check out the ...

jqueryhtmlcssimage

Setting the background color for a div in Vue.js when importing HTML

Check out this HTML code snippet <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Getting Started: Serving Web Content< ...

htmlvue.js

There are two different ways to set a hyperlink in HTML. One method is by using the href attribute, where you provide the URL inside the quotation marks. The other

While browsing, I stumbled upon this interesting piece of JavaScript code: onClick="self.location.href='http://stackoverflow.com/'" I incorporated this code into my website, and it seems to have the same effect as using the href attribute. Sin ...

javascripthtmlonclickhref

Struggling to locate element using Selenium in Python 3?

While using Selenium for WebScraping, I've encountered difficulty detecting an element using xpath, full xpath, id or text. <div id="cbp-vm" class="cbp-vm-switcher cbp-vm-view-list"> <div class=cbp-vm-options">...& ...

pythonhtmlselenium

Failure to validate two dates, even when they are both in date format within AngularJS

Although it may seem silly to ask, I am confused as to why this is not working. Even though all the values appear fine in debug mode. My goal is to display an error if the productionStartFrom date is before the current date. Controller scope.currentDate ...

javascripthtmlangularjs

The CSS scale property is not working as expected when used in a React.js application, specifically

working environment ・next.js ・reacｔ ・typescript https://www.youtube.com/watch?v=ujlpzTyJp-M A Toolchip was developed based on the referenced video. However, the --scale: 1; property is not being applied. import React, { FunctionComponent ...

htmlcssreactjstypescriptcss-selectors

Integrate stylish checkbox design into a form in Rails

I discovered some beautiful css styles for checkboxes that I would like to use instead of the regular ones. You can find these styles here: . Could someone guide me on how to implement this change? This is the code snippet from the form: <div class=" ...

cssruby-on-railstailwind-css

Is there a way to retrieve the dates from last month using jQuery?

Currently, I am unable to select past dates with the provided code. How can I adjust it to allow for selecting dates from previous months? let firstDay = new Date(); $('#date_filter_startmonthly').datepicker({ startDate: firstDay, endDate: ...

javascriptpythonhtmljqueryajax

What are some methods for converting data from data tables into alternative formats?

I need assistance exporting data from data tables in various formats such as Copy, CSV, Excel, PDF, and Print. Can someone show me how to do this for the example provided below? <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.4 ...

jqueryhtml

Ensure that the following div remains positioned beneath the current one

After reading through this question on Stack Overflow, about creating a responsive table with both vertical and horizontal headers, I came across this particular issue, demonstrated in this codepen example: Currently, the second table appears directly bel ...

htmlcss

What could be causing the visibility issue with my navigation items in the bootstrap navigation bar?

Currently, I am experiencing a puzzling issue with the navigation bar on my live website. The navigation items seem to flicker for a brief moment and then disappear entirely. This unexpected behavior is certainly causing me some concern. I crafted the us ...

javascripthtmlcssweblogic

What is the best way to assign an HTML string to the DOM and connect it with an object?

In my angular HTML component template, I have the following markup: <div *ngIf="htmlTemplate && jsonObj" [innerHTML]="htmlTemplate"></div> The jsonObj variable is retrieved from an endpoint and looks like this: { fi ...

htmlangularbind

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

How to Retrieve Element Property Values from the DOM with JavaScript

I am currently attempting to access the property of an element within my webpage. My main objective is to toggle a float property between left and right when a specific onClick event occurs. However, despite my efforts, I am facing challenges in even acces ...

javascriptcsselement

Can jQuery UI modal dialog interfere with clicking events?

I am encountering an issue with a button that is supposed to display a popup when clicked. In my layout.jspx file, I have the following code: <div class="menuBtn"> <div class="search"> <span></span ...

javascriptjqueryhtml

pull information from mongodb into angular

I am attempting to retrieve data from MongoDB, but I keep seeing [object] [object]. How can I transfer array data from MongoDB to Angular? Here is the code snippet: import { Component, OnInit } from '@angular/core'; import {HttpClient} from &quo ...

htmlarraysangularmongodb

What is the process for assigning a value to the body in a div element?

Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...

javascriptjqueryhtmlcss

Ways to match a string against a numeric value

I have a span id with textContent which have their own time(hour/minutes) <div class="here"> <span class="time" >8 min</span> </div> <div class="here"> <span class="time" >22 min&l ...

javascripthtmlcss