Trouble with SCSS Nesting

Can anyone help me with styling an H3 and a p tag within a div?

I'm facing an issue where the p tag is not being styled in this code block:

.marketing-single-page-titles{
h3 {
  margin: 0;
  padding: 0;
p {
  margin: 0;
  padding: 0;
  position: relative;
  top: -5px;
  color: $marketing-blue;
  font-weight: bold;
}}}

However, the following code successfully styles the p tag:

.marketing-single-page-titles p {
  margin: 0;
  padding: 0;
  position: relative;
  top: -5px;
  color: $marketing-blue;
  font-weight: bold;
}

Any insights on why the styles for the p tag are being ignored in the first block?

htmlcsssass

Answer №1

To ensure proper code formatting, it is important to nest the p within the h3 tag.

Here is an example of correctly formatted code highlighting the issue:

.marketing-single-page-titles {
  h3 {
    margin: 0;
    padding: 0;

    p {
      margin: 0;
      padding: 0;
      position: relative;
      top: -5px;
      color: $marketing-blue;
      font-weight: bold;
    }
  }
}

Corrected format (note the placement of closing curly braces):

.marketing-single-page-titles {
  h3 {
    margin: 0;
    padding: 0;
  }

  p {
    margin: 0;
    padding: 0;
    position: relative;
    top: -5px;
    color: $marketing-blue;
    font-weight: bold;
  }
}

Answer №2

The block of code will only be effective if the paragraph is contained within the h3 tag, like this:

<h3>My title with a <p> paragraph included</p></h3>

Your initial CSS rule for styling paragraphs inside h3 tags can be written as:

.marketing-single-page-titles h3 p { .....

That's the reason behind it.

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

Conditionals in ng-class Syntax

I'm attempting to apply a class conditionally to an element, but I'm struggling with the correct syntax. I've experimented with the code below, but it's not functioning as expected: ng-class="{foo: bar === "true"}" The value of bar i ...

javascripthtmlcssangularjs

Try utilizing MutationObserver to monitor changes in various nodes

I am faced with a situation where I have elements in my HTML that are dynamically populated with text from an API. My goal is to check if all these elements have a value and then trigger a function accordingly. The current code I have only allows me to obs ...

javascripthtmlmutation-observersmutation

Experiencing strange behavior with floating labels in Bootstrap 5.3 on my Google Chrome browser (Version 123.0.6312.86 (Official Build) (64-bit))

Lately, I've observed an unusual behavior with BS 5.3 floating labels. Strangely, the placeholder is being displayed below the label text, which is not the expected behavior. On Google Chrome, the floating labels are appearing like this: https://i.ss ...

cssgoogle-chromebootstrap-5

Content positioned beside an image with the help of Bootstrap 4 framework

How can I align text to the right of an image, like a table layout? I experimented with grid layout using <div class="span2"> and <div class="span10"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bo ...

htmlcssbootstrap-4

Managing the layout with React Native Flexbox to evenly distribute items

Check out this React Native Demo I put together featuring Santa images being added and removed in a Flexbox. Bunch of Santas I noticed that when there are more than 3 Santas, the layout shifts to the left. I'm curious about how to keep the Santas ce ...

javascriptcssreactjsreact-nativeflexbox

What is the best way to generate an extensive table with HTML and AngularJS?

I am looking to implement an expandable table feature where a single header with a plus icon can be clicked to reveal the child rows beneath it. Currently, I have been able to achieve this functionality. However, I am facing an issue where the child rows ...

javascripthtmlangularjs

Resizable Bootstrap column-md-4

I need to make a bootstrap column fixed position (col-md-4). This is for a shop layout with 2 columns: Shop content (long & scrollable) col-md-8 Cart content (short & fixed so it stays visible while scrolling the shop content) col-md-4 I'm ...

csstwitter-bootstrapcss-position

Error: PHP syntax error occurred due to unexpected double-quote mark

As a beginner in php, I've been encountering an error in my code echo "<a href=\"PHadmin_deletePatient.php?id=<?php echo $row["PatientID"]; ?>\" class='delete' title='Delete' data-toggle= ...

phphtmlsyntax-error

Tips for modifying the appearance of a text file within an iframe

Lately, I've been facing a dilemma on my website. I have an iframe code that looks like this: <iframe src ="http://hokuco.com/cde/user.txt" id ="myIframe"></iframe> However, the consolas font used in the iframe makes my website appear ...

htmlcssiframe

Tips for implementing a dynamic value in the ng-style based on certain conditions

Is there a way to set a background-color conditionally using ng-style when the color value can be updated from $scope? These are the variables in my scope: $scope.someone = { id: '1', name: 'John', color: '#42a1cd' }; $scope ...

javascriptcssangularjs

When my contact form is viewed on mobile, an unexpected margin appears

On my main page, I have a contact form positioned on top of an image slider that appears like this: https://i.sstatic.net/aGnj1.png The contact form is nested inside the slider's div as shown below: <div class="img-slide"> <div c ...

htmlcss

What is the best way to align a div in the middle of an input-group div?

When dealing with a nested div, where the parent div is styled with an input-group class, my goal is to have the nested div centered within the available line or on the next free line space. This is the desired layout I want to achieve regardless of the n ...

htmlcssbootstrap-5

Divided Progress Indicators in Bootstrap 3

Looking to enhance user experience on my webpage by creating a progress bar for data entry. The goal is for users to enter 10 items before proceeding. The challenge I'm facing is developing a progress bar that accurately reflects the number of items ...

htmlcsstwitter-bootstraptwitter-bootstrap-3progress-bar

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above. Despite spending a few hours searching for solutions online, I have not been able ...

htmlcssmarginpadding

What is the best way to incorporate a mute/unmute button into this automatically playing audio?

Seeking assistance in adding a mute button for the background sound on my website. Can anyone provide guidance on how to achieve this? Below is the HTML code responsible for playing the sound: <audio id="sound" autoplay="autoplay" ...

javascripthtmlgoogle-chrome-extension

Deciding Between Two Columns or One Column for Your JQuery Accordion

I am currently working on customizing an Accordion that is too large in height for my liking. My goal is to convert the single column layout into a two-column display, side by side. Having multiple items in one column results in excessive height, hence t ...

jquerycss

adding <script> elements directly before </body> tag produces unexpected results

While following a tutorial, the instructor recommended adding <script> tags right before the </body> to enhance user experience. This way, the script will run after the entire page content is loaded. After implementing the code block as sugges ...

javascripthtmldom

Graphic background integrated into form input

Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text? Are there alternative methods we could use for this functionality? ...

htmlcsssvg

The calculator is experiencing issues with JavaScript functionality

Having some trouble developing a calculator using HTML5, CSS, and JavaScript. After passing my HTML and CSS through validators successfully, I encountered issues when adding JavaScript functions to enable the functionality of the buttons on the calculator. ...

javascripthtmlcss

Tips for aligning input vertically across rows with bootstrap 5

I'm currently working on a form layout where each row contains a different number of columns, with labels and inputs in each column. However, I'm facing an issue where the start of the input is not aligned vertically for each row. I tried using ...

htmlcssbootstrap-5