The child element with the specified position within the id element

Is it possible to highlight 'The second paragraph' of p id="dd" using nth-child? I noticed that when I add "#dd" in styles, it stops working properly.

<!DOCTYPE html>
<html>
<head>
<style> 
#dd p:nth-child(3) {
    background: red;
}
</style>
</head>
<body>
<p id="de">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</p>
<p id="dd">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</p>
</body>
</html>

htmlcsscss-selectors

Answer №1

As previously mentioned by Muhammad Usman,

It is necessary to modify the "parent" <p> to a <div> in order for it to function correctly.

#dd p:nth-child(3) {
  background: red;
}
<div id="de">
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>
<div id="dd">
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>

Answer №2

It is not permissible to put a p tag inside another p tag. To resolve this, create a div and place the paragraphs inside.

Access the code snippet here

The main modification in the code snippet is organizing the paragraphs within separate div elements.

<div id="de">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<div id="dd">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>

Answer №3

It's not recommended to nest paragraphs inside another paragraph. Check out this informative post by Matt Ball.

Your method is correct; you can utilize #dd:nth-child(n) where n represents the specific child you want to style with your CSS rules.

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

Navigate to a fresh web page without encountering any script loading issues

I am currently working on a web application that loads new pages without requiring the browser to reload. While some pages load perfectly fine, others are causing errors due to missing scripts. The code snippet below is used to load a new page: function lo ...

javascripthtmljqueryajax

When faced with the scenario of having the hashtag in the href attribute and a browser's back button, it

Hello everyone, I've encountered an issue with the "back" action in my browser. When I click on a link, it takes me to a specific page due to a JavaScript function being called. However, when I hit the back button, it simply removes the "#" from the U ...

javascripthtmlhref

XML, XTL, and HyperText Markup Language (HTML)

I am facing a challenge with transforming a list in an XML file into an HTML view using XSLT. The nesting of the lists is causing issues and the output is not meeting my requirements. XML: <book-part> <list id="ch4list2" list-type="simple"> & ...

htmlxmlxslt

IOS Troubleshooting: Ineffectiveness of the Transform

So I am encountering a slight issue while trying to incorporate this code on iOS because I am not familiar with how iOS operates. On my website, I have implemented a circle that works perfectly fine on browsers and Android devices. However, when it comes t ...

ioscsstransform

Using innerHTML within a JS function causes the class to malfunction

I want to embed HTML code using innerHTML, which will add an input with the class .flatpickr-date. let newInput = '<input type="text" class="flatpickr-date">' document.getElementById('id').innerHTML = newInput; In my JavaScript ...

javascriptjqueryhtml

Tips for Accessing a New Website Using the Floating Layer Close Button

How can I trigger the opening of a new browser window when a visitor clicks the close "x" on my floating layer ad? The close button is within an HTML link code ("a href"), but simply putting a URL in there does not seem to work. <script language=" ...

javascripthtml

Ways to align text and horizontal rule perfectly within a div container?

I need to add some text to my <div> container and make sure it is centered. .hr { background: green; height: 50px; margin: 65px 0; width: 3000px; } <div class="hr"></div> This is an illustration of my project: https://i.sstatic.n ...

htmlcsspositiontext-alignment

Stylish slanted divs achieved using Bootstrap 4

I'm currently in the process of constructing a block with 6 slanted divs using Bootstrap. Take a look at the image provided below: https://i.sstatic.net/vvg0b.png After attempting to use rows and columns, I noticed that they weren't aligning co ...

htmlcssbootstrap-4

How to properly center and align the width of a figcaption element within an image placed in a figure element

I've been struggling for two days now trying to fix an issue with the alignment of images and captions on my Django application. In my app, users can upload images, and I'm using figure and figcaption tags to display the image with a caption. Ho ...

cssdjangohtmlwidthcenter

Learn how to dynamically insert input data into a table based on a specific ID in React JS!

[Help needed! I am trying to store the marks, id, and name values of each cell in objects of an array. However, I am not getting the correct answer. Can someone guide me on how to properly store the marks and id of each cell in objects of an array? const [ ...

javascripthtmlreactjsmaterial-uimaterial-table

I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

I'm having an issue with my webpage where it doesn't scroll even when the content exceeds the page length. I've tried adjusting the position settings for the body, html, and div elements but haven't seen any changes. Here is the HTML ...

htmlcss

When resizing the window, navigation items vanish

I've implemented the collapse feature using Bootstrap, but encountered an issue where my nav elements disappear when resizing the window. Do you have any suggestions on how to fix this? Here's a snippet of my code: Navb ...

jqueryhtmlcssbootstrap-4

In iOS devices, the Ionic framework restricts the ability to open links in a new tab using the ng-href attribute

In my quest for mobile functionality, I'm aiming to implement a feature on devices where tapping will open 'codepen.io' (triggered by ng-click), and tap and hold will display a context menu with the option to 'Open In New Tab', red ...

javascripthtmliosangularjsionic-framework

Load the div using ajax upon submitting the form

I have a basic HTML form with one input field and a submit button. The information entered will be sent to a PHP script which then stores it in a database and displays it within a DIV using Smarty. Without using Ajax, this process works fine as the data ...

jqueryajaxformshtmlsubmit

Create a div that vanishes when hovered over

I want to create a div element that disappears on hover using CSS without reappearing when moving the mouse again. While I know this can be achieved using JavaScript, I'm looking for a solution that incorporates CSS transitions for a smoother effect: ...

htmlcss

Tips for centering a list using flexbox technique

I have 3 boxes stacked vertically using flexbox, currently positioned to the left. I am looking for a more elegant solution to center them horizontally without compromising the layout. I attempted using margin: 10px auto on a div which seemed awkward in th ...

htmlcssflexboxcentering

Why does the div inside the tbody element get automatically shifted outside of the tbody during rendering?

Below is a snippet of my code: <body> <table> <tbody> <div>test</div> </tbody> </table> </body> Upon executing the code mentioned above, it transformed automatically in ...

htmlcsshtml-table

Combining CSS documents

In order to improve page load speed, I need to consolidate multiple CSS files into one large file. Will the styles function properly if I merge them all together, or are there potential issues when combining multiple CSS files? My software is built in Ja ...

javacssmerge

Steps for displaying the dropdown menu

I am having trouble with displaying the dropdown menu when hovering over the class (dropbtn). I tried adding .dropdown:hover .dropdown-content-strategy{..} but it's not working as expected. If I do manage to show the dropdown menu, it stays visible ev ...

htmlcss

Adaptive search bar and components housed within a casing

I am struggling to create a responsive box with a search feature for a mobile website. My plan is to incorporate jquery functions into the site, so I need to design an outer container that will house a distinct logo and search bar. However, when I test thi ...

htmlcss