Uncertainty surrounding the inherited styling of an element in HTML

I am seeking clarification on the distinction between two methods of writing HTML code:

CSS file (applies to both the first and second way):

.parent{
  color:red;
  font-style: italic;
}
.child_1{
  color:blue;
}
.child_2{
  color:green;
}

First approach:

<!DOCTYPE html>
<html lang="en">
  <head>
    This is the head.
  </head>  
 <body>
  <div class="parent">
     <div class="child_1">
        <p>division1</p> 
     </div> 
     <div class="child_2">
        <p>division2</p>
     </div> 
  </div>  
 </body>  
</html>  

Second method:

<!DOCTYPE html>
<html lang="en">
  <head>
    This is the head.
  </head>  
 <body>
    <div class="parent child_1">
       <p>division1</p> 
    </div> 
    <div class="parent child_2">
       <p>division2</p>
    </div>   
 </body>  
</html> 

Both methods yield identical output:

https://i.sstatic.net/o4BJ9.png

I would appreciate an explanation on the significance of each approach and which one is generally preferred by developers.

Answer №1

As a Junior, I will attempt to explain in a different way. Picture your divs as boxes.

In example 1: To change the background-color, you can type => background-color: red; You will notice that both children of the div are affected by the same background color. In essence, there are 2 boxes within one.

In example 2: If you manipulate the class named parent, you can also alter the background-color. However, your changes will impact both divs in the same way, even though there are still only 2 boxes.

My English may not be perfect, but think of each div as a box. Then inside, you can create more boxes.

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

Show a property from the local storage as an option in ng-options

Within my Angular application, I keep crucial victim data in local storage. This data is then showcased in the view where it can be altered (via a <select>): <h1>Victim #{{victim.numero}}</h1> <label>Victim status</label> &l ...

How can a loading circle be displayed upon clicking a button on a PHP website using JavaScript?

As a newcomer to the world of JavaScript programming, I'm facing a challenge that seems deceptively simple. My goal is to display a loading circle when a user clicks on an upload button, trigger external PHP code for image processing, and then make th ...

The latest update to andt version 5.20.0 has encountered an issue with the FastColor.js file located in the node_modules. An error has been identified at line 56

After updating to the latest version of [email protected], I utilized npm i antd --save --legacy-peer-deps without any issues. However, upon running npm start, I encountered an error in the console. Is anyone else experiencing this problem? ERROR in . ...

The functionality of JavaScript disappeared after implementing Bootstrap

Once I connected bootstrap to my HTML file, the buttons stopped functioning properly. I encountered a "uncaught typeerror cannot read property addEventListener" error after integrating bootstrap. I managed to resolve this issue by heeding past recommendati ...

The useParams() function is returning undefined, even though the parameter does exist in the destination URL

I have a complete inventory of items called "Commandes" (PS: the app is in French), displayed in a table with a column for each row that should redirect me to another component showing more details about the selected row. To achieve this, I need to utilize ...

Execute a function prior to making a synchronous call

Seeking guidance on a complex issue that I have encountered. In my code, I am dealing with a synchronous AJAX call and need to execute a function before this particular call is made. The function in question is a simple one: $.blockUI(); This function ...

Options for managing URLs with jQuery

I've been working with a jQuery user interface component called aciTree, which is a tree list that uses Ajax as the data source. When I provide a URL that returns JSON, everything functions properly. However, I need to generate the JSON dynamically an ...

Selenium encountering difficulty extracting data via VBA with error message "NoSuchElementError"

Hello everyone, I'm new here on StackOverflow and seeking some assistance. I am attempting to extract data from a table on a website using Selenium for the first time. However, I encountered an issue while trying to use FindElementByClass as it return ...

Show and hide a division based on the status of a checkbox

I have a specific requirement regarding authentication modes. When selecting a single factor, only one type of authentication mode can be chosen at a time and the corresponding div will be displayed. However, when selecting multiple factors, I should be ab ...

Vuetify's scrolling list feature allows for smooth navigation through a list

Check out my Vuetify code snippet that utilizes a list: <v-list> <v-list-tile v-for="user in users" :key="user.id" avatar @click="" > <v-list-tile-content> < ...

What is causing ui-route to fail in resolving state1 when transitioning from state2?

I have a program that consists of two views (lefthandmenu and content), with modules. When the user selects a module from a combo-list, $state.go() is called with the selected module name, and the views should update accordingly. See code samples below. I ...

Unable to load models in face-api.js even though attempting to infer the models

Currently, I am working on developing an application for face detection. However, I am encountering an error stating "SsdMobilenetv1 - load model before inference" despite loading the models. The Front End HTML File is being sent from the server, ...

Connect ng-include URL to certain paths

I am working with multiple routes in my application: routes.js $routeProvider.when( '/dashboard/one', { templateUrl: 'partials/dashboard.html', controller: 'DashboardCtrl' }); $routeProvider.when( '/da ...

What is the best way to implement a hover effect on each direct child individually using CSS?

I have been attempting to create a tab bar with hover effects on its direct children, but I am facing some challenges. Below is the code snippet I have so far, which aims to apply an effect to each element inside the list individually. HTML code : < ...

What is the best way to retrieve a modified HTML input field in CodeIgniter PHP?

I am using a CodeIgniter PHP website with a form for users to add and edit products. The editing process is functioning correctly, here is the code for editing a product: View: <form action="" method="post" enctype="multipart/form-data"> < ...

Changing a particular field value within an array of objects in Angular 4

I have a scenario where I created a class called security: class security { public id:number; public name:string; } Next, I initialized an array of security objects: let s:security[]=[{id:1,name:'Alex'},{id:2,name:'John'},{id:3,nam ...

Creating a responsive canvas and image container in fabric.js involves adjusting the layout and size of the

I am working with fabric.js and canvas to dynamically add an image from a URL. I would like to make the canvas responsive based on the resolution. How can this be achieved? Here is my current code: <canvas id="panel" width="700" height="350"></ ...

What steps do I need to take to ensure that when running npm start, Chrome opens in incognito mode or that caching is

During my development process, I have encountered frustrating issues related to caching that are difficult to debug. I am looking for a way to disable caching in order to alleviate this problem. One approach I am considering is modifying the default beha ...

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Is there a way to automatically scroll my page when the window is at a small height, instead of adjusting it to the height by squeezing it? I've tried using overflow in different ways, but haven't been successful in getting the entire page to scr ...

Why does this straightforward CORS request require a pre-flight options verification?

I've encountered an issue with a CORS request to a cross-origin resource. My assumption was that since it's a POST request with a parameter, it would qualify as a simple CORS request and not require a pre-flight call. However, that doesn't s ...