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

What is the best way to incorporate a button for toggling CSS animations?

I need help adding a button to toggle the animation on this JSFiddle. I tried adding the code below but can't seem to start and stop the animation. body .a [class^="b"] { width: 200px; height: 142.8571428571px; margin: 0 auto; ...

javascriptjqueryhtmlcss

Extracting JavaScript variable data to PHP using Ajax technology

I've been trying to save latitude and longitude values in PHP variables, but I'm having trouble. Here is the code I'm using. Can anyone please help me figure out why these values are not being stored in PHP variables: Code: <!DOCTYPE h ...

javascriptphphtmlajax

Why is it that an HTML entity-containing string doesn't show the character after going through the htmlspecialchars() function?

In my project, I have a string of text retrieved from the SQL database which is then sanitized using PHP's strip_tags and htmlspecialchars functions to eliminate any HTML formatting that users might try to inject. This processed text is displayed in b ...

phphtmlhtml-entitieshtmlspecialcharsstrip-tags

Using PHP to output HTML tags as text

How can I display an HTML tag as text on screen, rather than in code format? I want readers to be able to easily read the tag itself. What is considered the best practice for achieving this? print htmlspecialchars('<meta name="copyright" conten ...

phphtmltags

Embed a static label inside an input field that remains constant even while text is inputted, without using a placeholder. Crafted using HTML,

Take a look at the screenshot below - what you see on the left side is my current setup, while on the right side is the desired outcome achieved without any plugins or HTML5 attributes The left side scenario occurs when I have 2 input fields - one with th ...

javascriptjqueryhtmlcss

Is there a way to automatically select all checkboxes when I select contacts in my case using Ionic 2?

initializeSelection() { for (var i = 0; i < this.groupedContacts.length; i++) { for(var j = 0; j < this.groupedContacts[i].length; j++) this.groupedContacts[i][j].selected = this.selectedAll; } } evaluateSelectionStatus() { ...

javascripthtmlangularionic2

How can I include line breaks using HTML `<br>` tags in a textarea field that is filled with data from a MySQL

Within a modal, I am showcasing a log inside a read-only <textarea> field that contains data fetched from my MySQL database. Below this, there is a writable <textarea> field where users can input updates to the log, which are then added to the ...

javascriptphpjqueryhtmlmysql

Tips on utilizing toggleClass to display only the currently active item and obtaining the active class name

I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My ques ...

jquerycssjquery-ui

The sass compiler has produced two separate CSS files, but I am only able to link one of them to the index.html file

Everything was going smoothly with my SASS compiler. The styles were reacting perfectly in the live web server. But then, out of nowhere, it stopped working. Upon closer inspection, I realized that the extension had created a new CSS file. Instead of compi ...

csssass

Troubleshooting: Issue with CSS chaining adjacent sibling and :checked functionality

When I click the second radio button in Chrome, why does paragraph 2 stay highlighted and paragraph 4 doesn't get highlighted? Is this a bug with Chrome? HTML: <input type="radio" name="toggler" checked /> <p>Paragraph one</p> < ...

cssgoogle-chromecss-selectorspseudo-class

Is it possible for JavaScript to only work within the <script> tags and not in a separate .js

I'm facing a puzzling issue with my JavaScript code. It runs fine when placed directly within <script>...code...</script> tags, but refuses to work when linked from an external file like this: <SCRIPT SRC="http://website.com/download/o ...

javascriptjqueryhtml

Finding the element and extracting its text value

Below is the HTML code: <span> <b>Order number:</b> </span> <span>A36HASJH</span> The value within the span element, A36HASJH, is dynamic and changes with each order. How can I identify this element and store it as a s ...

javahtmlseleniumxpathselenium-webdriver

Exploring jQuery's ability to retrieve CSS values

Is there a way to use jQuery to read a specific CSS value from a class? The situation is as follows: HTML: <div class="box"></div> CSS: .box { margin-top: 100px; } I want to determine if the .box class has a margin-top of 100px in order t ...

jquerycssreturn-value

Does Div have the capability for text-shadow?

Is there a way to create a shadow effect for DIVs similar to the text-shadow property? While text-shadow is great for adding shadows to individual pieces of text, I'm interested in applying a shadow effect to an entire DIV element. Does anyone have a ...

css

Extracting data from websites: How to gather information from dynamic HTML elements

On the website I am exploring, there is a dynamic graph with descriptions below it that keep changing. My goal is to extract all these trajectory descriptions. The HTML code snippet related to the description area looks like this: <div class="trajDesc ...

javascriptjqueryhtmlcssselenium

Establishing the default scroll position in tables using React.js

How can I set the initial scroll in ReactJS Material-UI tables? I'm working with a table that has numerous columns and I would like to have specific columns in view automatically without having to scroll, essentially establishing an initial scroll. I ...

javascripthtmlcssreactjsmaterial-ui

Insert a design layout into a text entry box

Currently developing an application with AngularJS and seeking a solution for adding a "template" to an HTML input field similar to a placeholder. Specifically, I have a date-field requiring user input in the format of dd/MM/yyyy or through a datepicker se ...

javascripthtmlangularjsangularjs-directive

Tips for evaluating style modifications on mouseover using cypress

Trying to test hover styles on table rows but encountering issues: Here is the code snippet I am testing: it("Table rows should display correct hover styles", () => { cy.get("table>tbody>tr").each(($el, index, $list) =&g ...

htmlcsscypresse2e-testing

The functionality of the Bootstrap dropdown list button is not functioning properly on mobile devices

Currently, I am in the process of developing a website and testing its mobile view on my iPhone. The website is still using bootstrap 3, but I have encountered some issues. When I tap on the navigation button on my iPhone, nothing happens - no dropdown lis ...

javascriptjqueryhtmlcsstwitter-bootstrap

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I'm using a mat nested tree ...

cssangulartreeangular-material