.red p {
color: red;
}
.blue p {
color: blue;
}<div class="blue">
<p> first </p>
<div class="red">
<p> second </p>
</div>
</div>Initially, I expected the first paragraph to be blue and the second one to be red. However, both paragraphs appear in blue color. Why is this happening?
The reason both paragraphs appear blue is because of the "C" in CSS, which stands for cascading. For more information on how CSS rules are applied and inherited, you can refer to the MDN documentation.
In this scenario, all <p> elements are styled as blue due to the .blue p selector taking precedence over the .red p selector.
To make sure that the <p> elements within the .red div are displayed in red, you can adjust your CSS like this:
.blue p {
color: blue;
}
.blue .red p {
color: red;
}
As you are probably aware:
.blue p will select any p tags within a .blue class..red p will select any p tags within a .red class.Your <p> first </p> is inside a blue class, so it matches the .blue p rule and displays as blue.
<div class="red"> is within both a red and a blue class, causing a conflict. CSS resolves this by using the last rule encountered, which in this case is the .blue p rule, resulting in the text being displayed in blue.
CSS solution
If p tags will always be direct children of your color classes, you can use the following solution. The > indicates a descendant selector that only targets immediate descendants.
.red > p {
color: red;
}
.blue > p {
color: blue;
}
Alternate CSS fix
You may also follow the suggestion from Tom. This method works because more specific CSS rules take precedence over less specific ones. Even though the blue rule comes later, the div .red p has two classes and is therefore more specific than .blue p.
.red p,
.blue .red p {
color: red;
}
.blue p,
.red .blue p {
color: blue;
}
However, this just shifts the issue one level deeper. The red class in the given HTML snippet will still appear blue.
<div class="blue">
<div class="blue">
<p> first </p>
<div class="red">
<p> second </p>
</div>
</div>
</div>
HTML adjustment
This simpler approach involves moving your classes to the p tags:
<div>
<p class="blue"> first </p>
<div>
<p class="red"> second </p>
</div>
</div>
Other considerations
There are various ways in which CSS rules can be overridden. It would be beneficial for you to explore CSS specificity.
Since the parent div has been styled with a blue color, your structure should look like this:
<div class="blue">
<p>first</p>
</div>
<div class="red">
<p>second</p>
</div>
The corresponding CSS code would be:
.red {
color: red;
}
.blue {
color: blue;
}
I have a form that includes an input field, a checkbox, and two buttons - one for adding a new field and one for deleting a field. I want to remove the add button and instead show the next field when the checkbox is checked. How can I achieve this? angu ...
After experimenting with d3 recently, I noticed some similarities with jquery. Is it feasible to substitute d3 for jquery in terms of general dom management? This isn't a comparison question per se, but I'd appreciate insights on when it might b ...
I'm attempting to modify a CSS code snippet for Spiceworks. Here is the specific line that I need to adjust: <td class="body-id cell-id" style="width: 12%; "></td> The following code: SPICEWORKS.utils.addStyle('body{background-col ...
I have a challenge in creating a custom CSS property to disable an element without using the disabled keyword. This is the code I came up with, but unfortunately, it did not achieve the desired result: <style> .admin { color: green; enable: ...
Can anyone offer some guidance on using AJAX in Django? I'm attempting to create a basic form with two inputs and send the data to my Python backend without refreshing the page. Below is the AJAX code I am using: <script type="text/javascript& ...
As someone who is new to the world of AngularJS, I am currently in the process of learning the basics. My goal is to organize a JSON file into 4 or 5 separate parent divs based on a value within the JSON data, and then populate these divs with the correspo ...
Can anyone provide guidance on this issue? I am dealing with two web pages - one containing multiple check boxes in a form that POSTs to the second page. Is there a method to pass all the checked checkboxes' values to the second page in order to deter ...
Is there a way to override the default behavior on bootstrap tabs that prevents clicking on the currently shown tab? I need the user to be able to click on the tab again even if it is already active, as I am using AJAX to load content and reloading the pag ...
I followed an MVC tutorial by howcode on YouTube, but I encountered an issue where my CSS and JS files were not loading due to the htaccess configuration. .htaccess file: RewriteEngine On RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA] I attempted vario ...
I'm currently working on removing text decorations from my text. I managed to remove the underline, but when I hover over the text, the color still appears. How can I get rid of this color as well? Take a look at the code below: messbox { backgr ...
Looking to extract a specific div class value, subtract 500 from it, and display the result in another div. Unclear about the steps needed to show the subtraction outcome on the other div. Consider this scenario: <div class="main-value">6000</d ...
I am having an issue with a header that has a video background. It looks great on desktop, but on mobile devices, it is only taking up about 2/3 of the screen width and is aligned to the left side instead of filling the entire width. I have tried several ...
I am currently working on a method to export tabular data from an HTML page to Excel using DocRaptor. My approach involves using PHP to pass the necessary data through their API for conversion into an Excel Spreadsheet. However, I have encountered an issu ...
How can I duplicate a content div in jQuery using the clone() method, while also incorporating the value of an input text? Is this the correct approach, or is there a better alternative? ...
There seems to be a simple issue that I'm missing here. I have two columns that maintain the same height based on the content inside them, but the background color doesn't fully extend in the shorter column. When the display shrinks, the columns ...
I am currently in the process of redesigning a website for a client. The site is already built using Joomla 1.7, but I am facing an issue with the articles section that was created by the client using a WYSIWYG editor. The problem lies in the messy code st ...
I have a collection of 10 background images for each season (Spring, Summer, etc.) stored in folders labeled 1, 2, 3, and 4. I am looking to randomly change the div background image for each season. For example, changing the random image from folder 1 for ...
Hello, I have a question regarding some JavaScript code that I am struggling with. function login() { var lgin = document.getElementById("logIn"); lgin.style.display = "block"; lgin.style.position = "fixed"; lgin.style.width = "100%"; ...
When inserting a div every nth-child and later calling the children of the parent, the jQuery inserted elements do not appear in this new list. How can I retrieve the inserted elements as well? Apologies if this is confusing. If it's easier to under ...
Is there a way to dynamically load various content (such as <img> and <a>) into divs every time a page is loaded? I've seen websites with dynamic or rotating banners that display different content either at set intervals or when the page ...