PHP code snippets do not interfere with one another's styles

header.php:

<div class="purple-box">
<!-- Header content -->
</div>
<style>
.purple-box {
    /* Styles for purple box in the header */
}
</style>

footer.php:

<div class="purple-box">
<!-- Footer content -->
</div>
<style>
.purple-box {
    /* Styles for purple box in the footer */
}
</style>

index.php:

<?php include 'header.php'; ?>
<?php include 'footer.php'; ?>

When I put PHP snippets in index.php because they have the same class name, the styles affect each other. I want to keep the same name but without the styles affect each other. There is any way to achieve this or the only way it to change the names?

*please I want exactly the SAME class names not .header-div1 and .footer-div1. OR .header .div1 and .footer .div1

Answer №1

To style elements differently using the same class name, you can increase specificity with the selector. This can be achieved by incorporating the element type or by using multiple classes in the selector.

* {
  margin-block: 1em;
}

header.div1 {
  color: firebrick;
  background-color: aliceblue;
}

footer.div1 {
  color: aliceblue;
  background-color: red;
}

header .div1 {
  color: red;
  background-color: antiquewhite;
}

footer .div1 {
  color: antiquewhite;
  background-color: slateblue;
}

.header.div1 {
  color: slateblue;
  background-color: mintcream;
}

.footer.div1 {
  color: mintcream;
  background-color: firebrick;
}
<header class="div1">
  Header content
</header>

<footer class="div1">
  Footer content
</footer>

<hr>

<header>
  <div class="div1">
    Header content
  </div>
</header>

<footer>
  <div class="div1">
    Footer content
  </div>
</footer>

<hr>

<div class="header div1">
  Header content
</div>

<div class="footer div1">
  Footer content
</div>

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

Firebug mistakenly detects phantom errors

<div id="video-player" data-src="http://www.youtube.com/embed..."></div> Inspect Element - Browser Developer Tools: Error: Access to property 'toString' denied I scanned the entire page (Ctrl+F) and could not find any reference t ...

Achieving successful functionality with position:relative in IE9

Having difficulty with the position: relative property in IE9. Check out this demo for reference: <div style="overflow:scroll;height:120px;"> <table id="table" width="100%"> <tr style="position:relative;background-color:#1b72a4;"> ...

Display the text and values of textareas/inputs located within a designated section of a form

I am looking to extract the labels and values of specific textareas and input tags on my website. I don't want to capture all of them, just those within a particular area. For example, I only want to retrieve the values that come after the textarea wi ...

confirm that the form is necessary and contains text

How can I ensure that a specific text string is validated for the input field labeled "promo"? Take a look at the code snippet below: <script> function validateForm() { var x = document.forms["myInquiry"]["promo"].value; if (x == null || x == "") ...

Tips for making a div with a single triangular side using Reactjs

Hey there, I'm looking to design a header similar to the one shown in this image. Can someone provide guidance on how I can achieve this UI using React.js? ...

What is the best way to display a Bootstrap toggle?

I am facing an issue with a Bootstrap toggle in a Handlebars template. When the page initially loads, the toggle is visible, however, after re-templating the Handlebars template that contains the toggle, it disappears. Before Re-Template: Initial code : ...

Removing the currently selected item from the OwlCarousel

I am trying to enable users to delete the item that is currently active or centered in an OwlCarousel. I have come across some code related to deleting items, but it seems to be a rare question: $(".owl-carousel").trigger('remove.owl.carous ...

Tips for showcasing an image on an HTML page

I am encountering an issue with my HTML page that includes a Button. When clicked, it is supposed to display an image using an Ajax call. The functionality works properly in Postman Rest Client. However, when accessed through a browser, it only shows raw ...

Incorporate content from a single HTML file into a different one

Hello, I am working with two HTML documents - let's call them index.html and index2.html for this example. I am looking to embed all the code within the body tag of index2.html into a section within index.html. Is there a way to create this connectio ...

What is the best way to align a GIF and two rows of text within a container div?

Check out my JSFiddle below: In this fiddle, there is an image sized 32 by 32 on the left side and two lines of text on the right. I need help aligning the center of the gif and the text with the middle of the enclosing frame. I've tried adjusting t ...

If the URL hash matches the ID of a specific div, then take action on the div's child element

Imagine I have the following HTML structure: <div class=".blog-item-holder"> <div id="AAAA"><div class="inner">AAAA</div></div> <div id="BBBB"><div class="inner">BBBB</div></div> <div id="CCCC">& ...

Extract the title of a research paper from the personnel website

I am looking to extract the title and authors of journal articles from the official web pages of all staff members. For example: https://eps.leeds.ac.uk/civil-engineering/staff/581/samuel-adu-amankwah The specific section I need to access is this: I am u ...

The jQuery Show Hide feature is experiencing issues specifically on Internet Explorer

Everything looks good in Firefox and Chrome, but unfortunately it's malfunctioning in IE. Does anyone have a suggestion for hiding select Dropdown options? I attempted using CSS with display: none but it didn't work. $j("#id option[value=&apos ...

I need assistance from someone knowledgeable in HTML and CSS. I am trying to create a div that dynamically increases its width until it reaches a specific

Seeking assistance to create a dynamic div that continuously expands its width until it reaches a maximum of 540px. It should start at 75px. Below is the HTML and CSS code I've attempted: .Loading-Screen { background-color: black; color: alicebl ...

Tips for resolving issues with the carousel container in bootstrap?

Is there a way to adjust the carousel box container in Bootstrap so that it remains consistent even with images of varying sizes? Currently, the box size changes based on the image dimensions when sliding through the carousel. Sample Code: <h1>Caro ...

Use vertical gaps to separate items by applying the following technique:

One of my components is designed to act as a badge. The CSS for this component includes: https://i.sstatic.net/F0QZ6.png HTML: <div class="label label-as-badge"> {{ value.Termo }} <i class="fa fa-times"></i ...

Deciphering the hierarchy of z-index stacking

I'm feeling a bit puzzled about how to determine the stacking order using z-index. I am struggling to grasp how browsers handle elements with the position property in comparison to those without it. Is there a set rule to establish the stack order o ...

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

Error Message: Unable to resolve the signature of a class decorator when called as an expression. The argument type 'ClassDecoratorContext' is not compatible with the parameter type 'string | symbol | undefined'. After creating a book ...

Leverage jquery to adjust the height or width of an element depending on which dimension is larger

I'm a beginner in jquery and html and am currently developing a gallery webpage. The functionality involves setting the selected image as the page background and then scrolling vertically based on the mouse pointer's position. This works well for ...

Storing User Information in Cookies using jQuery

My current jQuery script is linked to a button and it functions by toggling font styles on a website by enabling or disabling a stylesheet upon clicking the button. Now, I want to enhance this functionality by saving user preference to a cookie so that the ...