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

Switch the ng-bind-html option

Dealing with a string in my scope, I must determine whether I want the HTML escaped or not. A boolean value helps to decide if the HTML should be escaped or left as is. Snippet Check out some of my code examples below: $scope.result = "<b>foo</ ...

javascripthtmlangularjsng-bind-htmlng-bind

What is the best method for deleting scripts to optimize for mobile responsiveness?

My current plugin.js file houses all my plugins for responsive design, but it is unnecessarily large and cumbersome for mobile devices. I am considering creating two separate plugin.js files to toggle between for mobile and desktop views. What are the r ...

javascriptjquerywordpresshtmlresponsive-design

When the browser window is resized to mobile view, a div is overlapped by an image

I've encountered an issue with the image size and position when resizing to mobile view in the browser. .extension { display: table; padding: 50px 0px 50px; width: 100%; height: auto; color: #fff; background-color: #558C89; ...

javascriptjqueryhtmlcss

Tips for keeping images stationary while expanding on hover

Currently, I am in the process of developing my first website. My main goal is to create an image gallery that displays thumbnails of images and expands them when you hover over each one. Initially, I adjusted the sizes of the images to 100px*100px using H ...

htmlcssimage

Mobile navigation bar with Bootstrap transparency

I recently encountered a challenge with my Bootstrap navbar where I needed to remove the background. To achieve this, I applied the class "navbar-fixed-top" to the main wrapper. <nav class="navbar navbar-fixed-top"> After making this change, the na ...

jqueryhtmlcsstwitter-bootstrap

Is there a way to determine the app bar height within a React Material UI application?

I'm trying to create a full-screen image for the opening of my website using React and Material UI. Here's a snippet of my JSX code with the default Material UI theme: <AppBar> //code in between </AppBar> <Container sx={{margin: ...

javascriptcssreactjsmaterial-ui

A guide to building your own live HTML editing tool

I'm currently developing a PHP website that allows users to enter text into a textarea, and have the input displayed in a table in real time for a preview of the result. I am seeking guidance on how to make this feature possible. I have come across w ...

javascriptphpjqueryhtml

Using jQuery to define active or hover background images

I'm currently working on a list containing 5 items, with the first one active by default (thanks to jQuery adding a 'active' class). Each item has its own background image. When I click on any of the list items, another div gets updated with ...

jquerycssevents

"Creating a responsive design: Setting the width of a :before pseudo element based on the size of

I am looking to encircle specific words with an image circle. <p> <span class="Subjekt">Father</span> <span class="Predicate">brings</span> </p> using .Subject:before { position: absolute; background-ima ...

htmlcsswidthcss-positionpseudo-element

Are there any alternative approaches to handling frequent database updates in web development aside from using Websockets/AJAX for coding?

Currently, I'm in the process of developing an HTML and Javascript game and looking to implement a feature that displays the player's gold balance on the screen. The goal is to have this balance decrement by 1 every time the player clicks on a sp ...

javascripthtmlsqlajaxwebsocket

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

Using CSS grid to wrap three divs simultaneously

Can CSS grid be utilized to style three divs so that they wrap simultaneously when the screen size decreases? This transition: +---------+--+---------+--+---------+ | div | | div | | div | +---------+--+---------+--+---------+ to this: +- ...

htmlcssgrid-layoutcss-grid

Is it conceivable that Rails may be rendering HTML at a slower rate compared to static

When using a Rails layout, you can include HTML tags to render images like this: <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %> This will generate the following HTML code: <img alt="Sample App" class="round" src="/i ...

htmlruby-on-railsrubylayoutrendering

Exploring ways to style font families for individual options within ng-options

I am looking to display a combobox where each option has a different font. While using the ng-options directive in AngularJS to populate the options for a <select> tag, I am struggling to set the font-family for individual options. $scope.reportFon ...

cssangularjsangular-ui-bootstrap

Is there a way to create an X shape by rotating two divs when I click on the container div?

I currently have this setup: code Below is the HTML code: <div id="box"> <div id="line1" class="line"></div> <div id="line2" class="line"></div> <div id="line3" class="line"></div> </div> My go ...

javascriptjqueryhtmlcss

What is the best way to use appendChild within an AJAX get function to manipulate the DOM

I've been working on a code function where I try to append a list item (li) into the HTML received in 'msg', but it's not functioning properly. Any ideas why? function handleFileSelect(evt) { var files = evt.target.files; $(&ap ...

javascriptjqueryajaxhtml

Is it true that setting the background size to cover does not actually stretch the image?

Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any ...

htmlcssbackground-imagepositioning

Tips on aligning carousel images and captions next to each other

Would anyone be able to assist me in creating a carousel similar to this? I haven't been able to locate any examples or tutorials that match the design of my desired carousel. Here is the design I am referring to ...

htmlcsscarousel

Steps for implementing an onclick action in Angular 4 from infowindow content

Currently, I am integrating Google Maps into an Angular 4 project and I need to implement a click event inside the infowindow. How can I achieve this? I attempted the following code but encountered an issue where the name is undefined. Even though I called ...

htmlangulargoogle-mapsonclickinfowindow

Differences between Tags and Elements in HTML5

Could someone provide a detailed explanation of the distinctions between tags and elements in HTML5? I am curious about this topic because I have noticed a lot of confusion regarding the terminology online, with the terms being used interchangeably even o ...

htmltags