External CSS stylesheets

I have encountered the following HTML code:

   <div class="entry">
     <p></p> //text-indent here
     <blockquote>
      <p></p> //no text-indent here
     </blockquote>
    </div>

I am trying to apply a text indent only to the <p> tag inside the .entry class, but not to <p> tags inside the .entry blockquote.

This is my current CSS set-up:

.entry{
  p{
    margin: .85em auto;
    line-height: 1.7;
    text-indent: 1.5em;
  }
}

Is there any way to modify the existing CSS using the 'not' selector without introducing any new rules?

htmlcss

Answer №1

There are a couple of methods you can use to achieve this:

1. To style only the top-level paragraph, utilize the child selector (>):

/* All paragraphs inherit these styles */
.entry p {
    margin: .85em auto;
    line-height: 1.7;
}
/* Applying text indent only to the top level paragraphs */
.entry > p {
    text-indent: 1.5em;
}
<div class="entry">
    <p>Outer paragraph section</p> 
    <blockquote>
        <p>Inner paragraph section</p>
    </blockquote>
</div>

2. Alternatively, you can style all paragraphs and then overwrite the inner paragraph style using the descendant selector:

/* All paragraphs inherit these styles */
.entry p {
    margin: .85em auto;
    line-height: 1.7;
    text-indent: 1.5em;
}
/* Resetting the text-indent property for inner paragraphs */
.entry blockquote p {
    text-indent:0;
}
<div class="entry">
    <p>Outer paragraph</p> 
    <blockquote>
        <p>Inner paragraph</p>
    </blockquote>
</div>

Answer №2

To avoid indentation, it's important to clearly specify the elements you want to exclude. Check out the CSS snippet I've included below. Additionally, please note that the CSS code you provided is valid for SCSS but not standard CSS.

  .article blockquote p {
      text-indent: 0;
  }

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

Utilizing Jquery for toggling HTML elements and styling with CSS

I'm trying to implement a jQuery toggle button that switches between two states below; When I click the Toggle Button/link, everything in picture A (above the red line) should be hidden. Clicking the toggle button again would make it reappear. I&apo ...

jqueryhtmlcss

Personalize Material design slider Label - final element

When using Material-ui, the default position of Slider's labels is centered: However, I require the labels to have a space-between position. For example: To achieve this, I tried using the '&:last-child' property for the markLabel clas ...

cssreactjsmaterial-ui

What is the process for eliminating the message "Hello Member" on the Woocommerce Checkout page?

I've been struggling to remove a certain area on the checkout page without success. I attempted using this CSS code: .avada-myaccount-user-column .username { display:none; } https://i.stack.imgur.com/okFg9.png https://i.stack.imgur.com/GisRQ.png Cu ...

csswordpresswoocommercestylescheckout

Modifying the value property of the parent element

Here is an example of the HTML code I am working with: <td value='3' style='text-align: center'> <select class='selection' onchange=''> <option value='1'>1</option> <opti ...

javascriptjqueryhtml

Storing the DOM in a Variable

I have saved the response of an XMLHttpRequest() into a variable from a specific website, let's say yahoo.com. How can I retrieve the values of the DOM content using either getElementById or getElementsByName on this variable? For instance: var dump ...

javascriptjqueryhtmlxmlhttprequest

The #each helper in Handlebars is used to iterate over an array

I have a function that generates an array as output. I am looking for a way to iterate over this array using the each method. Can anyone provide guidance on how to achieve this? Consider if the handlebars helper produces the following array: details: [{ ...

javascripthtmlhandlebars.js

Can you explain the significance of the '#' symbol within the input tag?

I was reading an article about Angular 2 and came across a code snippet that uses <input type='text' #hobby>. This "#" symbol is being used to extract the value typed into the textbox without using ngModal. I am confused about what exactly ...

javascripthtmlangular

Determining the true width of a span element using jQuery

I am trying to determine the actual width of a span element within a div, but when I attempt to do so, it gives me the width of the entire div instead. Here is the code I am working with: <div class="content"> <span class="type-text" id="ta ...

jqueryhtmlcss

jQuery SlideDown Navigation

Is there a way to implement jQuery code that will display dropdown menu options when the Trials link is clicked? Update: jQuery(document).ready(function () { $("a[href='http://sheep.local/cms/trials']").click(function(e){ e.prevent ...

jqueryhtmlcss

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

javascriptjqueryhtmld3.jstext-rotation

What could be causing this jQuery color picker to malfunction when used inside a Bootstrap modal?

Currently, I am utilizing the fantastic jQuery color picker provided by Although it functions as expected in "normal" scenarios, I have encountered an issue where the picker fails to display when the input parent element is nested within a Bootstrap 3 mod ...

javascriptjquerycsstwitter-bootstrap-3

What is the proper placement for index.html <head/> class helper functions within a ReactJS Component?

My custom helper functions are stored in a JavaScript file called classie.js: ( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var hasClass, ...

javascripthtmlwebpackreactjs

Creating a p5.js circle on top of an HTML image: A step-by-step guide

Currently, I am integrating an image into my web application using standard JavaScript and HTML. The image represents a basic map, and my objective is to utilize p5.js to draw on it. <div id="map"> <img src="Assets/MENA.jpg" ...

javascripthtmlcssp5.js

deployJava.js injects a new <embed> element into the header section of the webpage

I've ran into an issue with the Java applets on my website. I included the deployJava.js load tag in the head section of the page, but when I look at the resulting HTML in Chrome debugger, this script seems to be breaking my head content and starting ...

javajavascripthtmlcssdeployjava

Adjust the button's color even after it has been clicked

My goal is to update the button's color when it's clicked. I found some examples that helped me achieve this, but there's an issue - once I click anywhere outside of the button, the CSS class is removed. These buttons are part of a form, and ...

javascriptjqueryhtmlcss

Creating a layout in jQuery Mobile with two HTML <input type="button"> elements positioned side by side and each taking up 50% of the screen

After trying numerous strategies, I am still struggling to place two buttons next to each other evenly: <input type="button" value="This week's Schedule" onclick= 'window.location.href = dic[current_sunday]' /> <input type="button ...

htmlcssjquery-mobile

A group of iframes are cropping at the bottom

Currently, I am encountering a problem with using iframes to manage the navigation aspects on my website. Despite setting the iframe to have "overflow: visible;", it still crops the bottom of my content. The strange thing is, both iframes on the same page ...

htmlcssiframe

Implementing dynamic width with ng-style in AngularJS

I am trying to dynamically resize a div when an event is fired from S3. In the code below, I pass the progress variable to the updateProgress function as a parameter. This function resides in the top scope of my Angular controller. s3.upload(params).on(& ...

javascriptcssangularjs

Error encountered: A missing semicolon was detected before a statement while executing code within a for

Although this question may have already been asked, I am struggling to understand why it is not working as expected. I simply want to increment the markers array within a for loop and then add each marker to the vector source using vectorSource.addFeature ...

javascriptjqueryhtml

PHP regular expression that identifies a specific HTML element

Similar Question: Effective ways to parse HTML using PHP I am currently creating a custom WordPress template for a client that requires a PHP function to extract specific HTML tags as defined by the function. For instance, if I input "div" into the f ...

phpregexhtml