What is the best way to target the first child element in this scenario?

Is there a way to target only the p tag with id="this" using .root p:first-child selector?

Here is the code snippet:

Link to CodePen

.root p:first-child {
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="root" id="this">
                <div class="container">
                    <p>test</p>
                </div>
                <div class="container">
                    <p>test2</p>
                </div>
                <div class="container">
                    <p>test3</p>
                </div>
            </div>
htmlcss

Answer №1

The first-child selector chooses and applies styles to each element that is the initial child of its parent. In this case, the styles were applied to all <p> tags because there is only one <p> tag inside its corresponding parent .container.

Instead of targeting the first child of the p element, target the first child of the class .container to achieve the desired outcome.

.root .container:first-child p{
  	background-color: green;
}

p {
	margin: 0;
}

.container {
	display: inline-box
}

.root {
	display: flex;
}

div {
	display: block;
	background-color: pink;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}
<div class="root">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
  <div class="container">
    <p>test3</p>
  </div>
</div>

Answer №2

Check out this handy css snippet:

.root p:first-child {
     background-color: green;
}

This code selects all paragraph elements that are the first child of their parent element. To target the first paragraph elements inside the first container, use this code:

.root .container:first-child p{
      background-color: green;
}

Alternatively, if you want to style the first paragraph inside both the first container and the first paragraph itself, try this:

.root .container:first-child p:first-child{
      background-color: green;
}

Answer №3

Are you searching for this? Choosing the paragraph inside the first child of the main element.

.main .box:first-child p {
  background-color: green;
}

p {
  margin: 0;
}

.box {
  display: inline-box
}

.main {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="main">
  <div class="box">
    <p>test</p>
  </div>
  <div class="box">
    <p>test2</p>
  </div>
  <div class="box">
    <p>test3</p>
  </div>
</div>

Answer №4

There are various methods to select the first child based on your specific requirements. Here are a few ways to achieve that:

If you want to target the first child of the container, you can use the following CSS:

.root .container p:first-child {
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="root">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
  <div class="container">
    <p>test3</p>
  </div>
</div>

If you wish to select the first child of the first container, you can utilize the following CSS code:

.root .container:first-child p {
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
<div class="root">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
  <div class="container">
    <p>test3</p>
  </div>
</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

What causes jquery to malfunction when making an ajax call?

UPDATE #2: I am experiencing a similar issue to this one, although it is not related to WP: . How can I implement this with my scripts? UPDATE: The main problem arises when the page is initially loaded, everything works smoothly and ajax is not triggered. ...

jqueryhtmlajax

HTML5's video tags are capable of displaying video content without audio playback functionality

My current project involves importing videos using PHP, utilizing a video tag. However, I've encountered an audio issue while doing so. I've tried various codes such as: <video controls> <source src="https://www.w3schools.com/html/mov_ ...

phpjqueryhtmlcss

Oops! There seems to be a problem with your AngularJS/JavaScript code. The error message is "Uncaught ReferenceError:

As I venture into the world of AngularJS and JavaScript, I am working on creating a 'blog' using these technologies. Here is my HTML view code- <div ng-controller="Controller1"> <form ng-submit="sub()" role="form"> Title: <textar ...

javascriptjqueryhtmlangularjs

Setting the default selected option in Vue for an object

Can the v-model data be different from the default option in this scenario? data: function() { return { user: { usertype: {}, } } <select v-model="user.usertype" class="btn btn-secondary d-flex header-input"> <option v-for= ...

javascripthtmlcssvue.js

Design a sophisticated background using CSS

I am wondering if there is a way to create a CSS3 background similar to the one shown in the image link above. The gradient should smoothly transition from white to black, spanning across a header div, and remain consistent regardless of screen width (alwa ...

htmlcss

Incorrect positioning on canvas

Is there a way to adjust text alignment within a canvas? Currently, my text is centered. However, when I change the text size, the alignment gets thrown off. Here is the code snippet: <canvas id="puzzle" width="480" height="480"></canvas> ...

javascripthtmlcanvas

Viewport height-responsive image not functioning as expected in Firefox browser

Is there a way to set an image to the 100% height of the browser window, with a small padding at the bottom, and have it centered on the page? I created an example in codepen that works well in Chrome and Safari, but not in Firefox. In Firefox, the image ...

imagefirefoxresponsive-designcss

What is the best way to position an image behind textboxes?

Need help with moving an image behind textboxes and a sign-in button? Check out my issue: https://i.stack.imgur.com/cGoEU.png The image is currently covering the login form. How can I position it properly? Here's the code snippet causing the issue: ...

htmlcssimagebuttontextbox

The concept of CSS background-position

Hey there, I have a query regarding a sprite image that contains icons with both normal and hover effects. Here is the current CSS code I am using: .wi{ background-image:url(images/icons/small/wi.png); background-repeat:no-repeat; display:blo ...

csscss-spritesbackground-position

How to output a string in jQuery if it includes a certain character?

I need to extract all strings that include a specific word within them, like this: <div> <div> <span> <h3>In Paris (Mark Bartels) worked for about 50 years.</h3> </span> </div> ...

javascriptjqueryhtml

Unable to eliminate top margin in Bootstrap 3 affix feature

Struggling to locate the source of the margin-top when utilizing the affix plugin on my Navbar. You can view [my website here] for better understanding. Should I be implementing Javascript to solve this issue? My current skills in that area are not very ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Leverage a single property from a CSS class within another CSS class

I am facing an issue where I need to utilize one property from a CSS class in another CSS class. .class_a {margin:10px; width: 360px; float: left; color:#ffffff; ...etc...} .class_b { use the margin property of .class_a } Only utilize the margin propert ...

css

Clicking on the delete option will remove the corresponding row of Firebase data

I am encountering an issue that appears to be easy but causing trouble. My goal is to delete a specific row in an HTML table containing data from Firebase. I have managed to delete the entire parent node of users in Firebase when clicking on "Delete" withi ...

javascripthtmlfirebasefirebase-realtime-database

Upon hitting submit, the form remains unresponsive

I have been developing a permissions system for my NodeJS project (Using the SailsJS MVC) and encountered an issue. After resolving my initial error as detailed here, I am now facing a problem where the form is unresponsive. It neither shows an error in th ...

javascripthtmlangularjsnode.jssails.js

Incapable of composing text using the MUI SearchBar

I'm having trouble with my Material UI search bar - it's not letting me type anything into it. How can I resolve this issue? Despite trying the suggested code snippets from other answers, I keep encountering errors when integrating them into my ...

javascripthtmlreactjsmaterial-ui

Tips for refreshing CSS following an ajax request

Currently, I am facing an issue with the CSS formatting on my page. I am using Django endless pagination to load content on page scroll. However, when new content is loaded, the CSS applied to the page does not work properly and needs to be refreshed. Can ...

javascriptpythoncssajaxdjango

Getting the ng-model value from a Directive's template and passing it to a different HTML file

When working with my name directive, I am unable to retrieve the value of ng-model from the template-url. team-two.html <form name="userForm" novalidate> <div name-directive></div> </form> <pre>{{userForm.firstname}}< ...

javascripthtmlangularjs

Issues with Datepicker functionality in Bootstrap 5 are causing it to malfunction or not display

I am having trouble incorporating a timepicker on my webpage with bootstrap 5. The calendar feature isn't loading properly, preventing me from selecting any dates. I'm unsure if the issue lies with an error on my end or if the plugin isn't c ...

javascripthtmltwitter-bootstrapbootstrap-5

Using lxml to extract data from dynamic HTML elements

Struggling to extract information from a dynamic field on an HTML page using the lxml library. The code snippet I've been working with is as follows: from lxml import html import requests page = requests.get('http://www.airmilescalculator.com/d ...

pythonhtmlweb-scrapinglxmllxml.html

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

htmlcsstextflexbox