The CSS is acting unexpectedly by applying styles to elements that were not intended to be styled

Question

The CSS is acting unexpectedly by applying styles to elements that were not intended to be styled

I am trying to style 2 specific elements within a div that has the class promotion, setting their text color to white.

.promotion h1, p {
    color: #FFF; 
}

<section>
    <article class="promotion grid-col-span-3 text-center">
        <h1>Spring Sale!</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam voluptatibus laboriosam debitis
                    dolor aut perspiciatis necessitatibus facilis expedita eligendi, accusantium saepe ut dolorum beatae
                    asperiores? Sit velit soluta asperiores perferendis.</p>
    </article>
</section>

However, the current styling is affecting elements outside the div with the class promotion as well.

html css

Answer 1

Answer №1

When writing CSS code, separate selectors with a comma ,. In your current CSS, you have two selectors: .promotion h1 and p.

To address the issue, simply prepend .promotion to the p selector like this:

.promotion h1,
.promotion p {
    color: #FFF;
}

Answer 2

When writing CSS code, separate selectors with a comma ,. In your current CSS, you have two selectors: .promotion h1 and p.

To address the issue, simply prepend .promotion to the p selector like this:

.promotion h1,
.promotion p {
    color: #FFF;
}

The CSS is acting unexpectedly by applying styles to elements that were not intended to be styled

Answer №1

Similar questions

Using a snippet of HTML code from one Angular component in another component

What is the best way to incorporate vertical lines into a set of progress bars?

Using AngularJS, I can bind the ng-model directive to asynchronously update and retrieve data from

Utilize checkboxes to sort through MySQLi data

Utilize jQuery to wrap text within <b> tags and separate them with <br> tags

Exploring the Power of JQuery Load and CSS styling

Struggling with using flexboxes and creating animated elements

Customizing Styles in Material UI with React

Utilizing BootStrap 4 to ensure uniform image sizes within a row of columns

The circular pattern includes six circles perfectly arranged within the larger circle

Creating a dynamic row in an HTML table with elements inside

Eliminating null values from arrays

The div with a 'inline-block' display and maximum width appears to be wider than needed after a line break

Ways to incorporate a background image using CSS

I am experiencing an issue with my Angular directive where the button click does not

Guide on navigating to a specific section on a different page using scrolling

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

Getting rid of the standard border around images

What could be causing Html.checkboxfor to fail in updating the boolean value of the model?

Using a class variable to access canvas methods in Javascript