:first-child Pseudo-class Selecting Wrong Element

I've created a website with the following HTML code:

<article>
    <p>Header</p>
    <p>Some content</p>
</article>

My goal is to make the 'header' text appear in bold. To achieve this, I referred to W3Schools for guidance on CSS selectors and found the following information:

:first-child - Selects every <p> element that is the first child of its parent

Here is my CSS:

article:first-child {
    font-weight:bold;
}

However, despite implementing the above CSS, the first paragraph element (<p>) remains unaffected. What could be causing this issue?

htmlcsscss-selectors

Answer №1

The best approach would be to use article > :first-child. This selector is known as the direct descendant selector, also referred to as the child selector:

article > :first-child {
    font-weight: bold;
}

Using article:first-child selects article elements that are the first child of their parent. On the other hand, article > :first-child targets the first child element inside the article.

It's important to understand that utilizing the descendants selector article :first-child instead of the child selector (article > :first-child) may lead to unexpected results as it will select all first elements that are descendants of the article.

An alternative option worth considering is using article > p:first-of-type to style the first <p> element that is a child of the article.

article > p:first-of-type {
    font-weight: bold;
}

Answer №2

Give this a try:

article > :first-child {
    font-weight:bold;
}

Alternatively, you can use:

article p:first-child {
    font-weight:bold;
}

Another option is:

article p:nth-child(1) {
    font-weight:bold;
}

Answer №3

Identify the responses that have been most beneficial to you by utilizing the selector "first-child": article p:first-child { font-weight:bold; }

Answer №4

section >: nth-child(2) {

font-weight:bold;

}

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

Struggling to align Bootstrap toasts in the center horizontally

Currently utilizing Bootstrap 4.6.1 (due to compatibility issues with bootstrap-select and newer versions) and endeavoring to center some toasts horizontally within a page using the code below: <div class="d-flex flex-row justify-content-c ...

cssbootstrap-4bootstrap-toast

Align the reposition button with the pagination in the datatables

I am looking to adjust the placement of my buttons. The buttons in question are for comparison, saving layout, and printing. I would like them to be inline with the pagination, as I am using datatables here. <table id="sparepart_id" cellspacing="0" ...

javascriptjqueryhtmlcssdatatable

The element in the data cell is a form input field

This is the content of my webpage: <input type="text" class="form-control" >id="ButonSociete"name="ButonSociete"placeholder="Societe"> <table cellpadding="0" cellspacing="0" border="0" class="display" >id="demande" width="100%"> ...

jqueryajaxhtmldatatables

using JavaScript to send numerous text box values to various views

I have a dilemma with passing values between two views. In View1, there are text boxes for entering basic information. After the customer enters this data and clicks on 'add more details', I want to transfer these details to the text boxes in Vie ...

javascripthtmlrazor

Tips for successfully passing PHP variables to a JavaScript function

Having trouble passing the selected values of two comboboxes to another PHP file using AJAX. How can I pass both values in one function? <script> function showUser(str,str2) { if (str == "" || str2 =="") { document.getElementById("tx ...

javascriptphphtmlajax

Using HTML to position multiple lines of text alongside an image

I have multiple lines of content and hyperlinks. Additionally, there is an image included. I am looking to have the text aligned on the left with the image on the far right, positioned next to the text. While I attempted to use flexblocks to center everyt ...

htmlalignment

What could be the reason my span is not altering color as I scroll?

Important HTML Knowledge <section class="home" id="home"> <div class="max-width"> <div class="home-content"> <div class="text-1">Hey t ...

javascripthtmlcss

Instructions for dividing a screen into two halves, either with a 20/80 or 30/70 split, using HTML

I've set up my HTML structure like this: <div class="row"> <div class="col"> <div class="leftside"> ...content for leftside goes here... </div> </div> <di ...

htmldjangobootstrap-4

Setting the height of a parent element in AngularJS when using ng-repeat

I'm dealing with a ng-repeat that has varying heights. When I set a fixed height, everything looks fine. However, I need the parent panel's height to adjust automatically based on the ng-repeat child elements to avoid overflow issues. Is there a ...

htmlcssangularjs

Using PHP to insert data from a form with multiple checkbox selections into a MySQL database

Having a form with various fields like Textinputs, Checkboxes, Radios...and seeking to submit it to a MySQL database. Oddly enough, when I remove the checkboxes HTML and associated PHP code, everything functions properly, and all information is successfull ...

phphtmlmysqlformscheckbox

Utilizing Express for hosting public static resources

I am having trouble configuring my Express server to serve files from the public folder. Despite trying various file path combinations, Pug does not seem to cooperate with Node.js. While I can view the HTML content of the index, the CSS and music files fai ...

cssnode.jsexpresspug

Is there a way to enlarge images when hovered using canvas?

I came across a fascinating example at the following link: , where the images expand when hovered over. I am aware that this can be achieved using jquery, but I have concerns about its speed and reliability. I would like to experiment with d3.js, although ...

javascriptcssangularjscanvasd3.js

javascript code for subtracting values in arrays

I am facing a scenario where I have 3 arrays of the same length. My requirement is to automatically subtract the values in the first two arrays without any user input. If the result of subtraction is negative, I need to identify the index of that array num ...

javascriptphpjqueryhtmlarrays

Is it possible to access the service and 'self' directly from the HTML template?

When working with Angular 6, one method to access component properties from a service is to pass 'self' to the service directly from the component. An example of this implementation is shown below: myComponent.ts public myButton; constructor(p ...

htmlangulartypescriptserviceself

What is the correct way to display or hide a button based on my specific situation?

Creating a 'show more' button for my app has presented me with a challenge. I am using a directive to handle actions when the user clicks on the read more button: (function(window, angular) { var app = angular.module('myApp'); ...

javascripthtmlangularjs

jQuery tooltip anchored to the left side of the screen, ignoring all attempts to adjust its position

I have a jQuery tooltip that is supposed to hover over the table header, but it is displaying on the far left side of my screen with no formatting - just black text. I have attempted to use the placement and position jQuery attributes, but they do not seem ...

javascriptjqueryhtmljquery-tooltipjquery-ui-tooltip

What is the procedure for adjusting the padding in Material UI's datepicker?

Click here to access the codesandbox link function InlineDatePickerDemo(props) { const [selectedDate, handleDateChange] = useState(new Date()); return ( <Fragment> <MuiPickersUtilsProvider utils={DateFnsUtils}> <Keyboa ...

cssreactjsmaterial-uidatepicker

What is the best way to move the numerical range value into a span element?

How can I implement the "update" function to retrieve the current slider value and transfer it to a Meter element with the message "Value: [current value]". The indicator color should be #ffff00 if the current value is at least 85, otherwise, it should b ...

javascripthtmlcssrange

I am having trouble retrieving dynamic values from a button using ajax. What could be causing this issue

I decided to create a unique dynamic button that utilizes ajax for calling when it's clicked. Each time the button is clicked, it pulls a fresh list of items from a specific website, resulting in its dynamic behavior. foreach($items as $item_link){ ...

javascriptphphtmlajax

Tips for adjusting the placement of an object within a table

Below is an example of a basic table: table, th, td { border: 1px black solid; border-collapse: collapse; } <table> <tr> <th>number</th> <th>name</th> <th>id</th> </tr> <tr&g ...

javascripthtmlcsshtml-table