Exploring the Power of CSS Pseudo Classes in Articles

My goal is to style the first article on my page using CSS. I have attempted the following methods:

article:first {
    background: blue;
}

and

article:first-child {
    background: blue;
}

Unfortunately, neither of these approaches seem to be working.

Here is a snippet of my HTML code (with head removed and content condensed for brevity):


...
<body>
    <div id="wrapper">
        <header>
            <hgroup>
                ...
            </hgroup>
        </header>
        <article>
            ...
        </article>
        <article>
            ...
        </article>
    </div>
</body>

I am currently using the latest version of Chrome as my browser.

Answer №1

The specific selector you need for your situation is #wrapper article:first-of-type, however, its compatibility is not extensive at this time.

Alternatively, you may want to consider using #wrapper header + article as it has better compatibility across various platforms.

Answer №2

Consider making adjustments to your HTML structure:

...
<body>
    <div id="container">
        <header>
            <hgroup>
                ...
            </hgroup>
        </header>
        <section>
            <article>
                ...
            </article>
            <article>
                ...
            </article>
        </section>
    </div>
</body>

The :first-child selector will only target the first actual child element (which was the header in this scenario).

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

implementing a collapsible sidebar menu with CSS tables

I am working on a layout with three columns created using css tables to perfectly fit the browser window. The first column serves as a menu and I want it to hide or move to the left when clicked, allowing the middle column to expand into its space. However ...

Django Ajax button fails to add item on initial click

My Django project features a dynamically rendered table for order items on the Cart page. Each item in the table displays the quantity, product name, total price, and more. To modify the quantity, I've implemented "add" and "subtract" buttons. Below i ...

A JButton named "action" with HTML styling and a specific keyboard shortcut

My JButton is created with an Action that contains HTML in its name. To set the mnemonic on the JButton, I first need to extract the first character from the name by parsing out the HTML tags. For instance, if the JButton name is "Test Button", after re ...

Use JavaScript to dynamically populate dropdown list options with array elements

I attempted to populate a dropdown list with array elements using javascript, but I encountered issues. I referred to the following links for assistance: JavaScript - populate drop down list with array use a javascript array to fill up a drop down se ...

Tips for opening local HTML files on iPhones and Android devices

Is there a way to access local files on my PC from my iPhone and Android devices without having to upload them to an FTP server each time? I currently use Windows 7 with an iPhone 4 and an Android device. When I need to view a file on my iPhone's brow ...

Achieving uniform column height with Bootstrap

I am struggling to make two columns of equal height. The content is constantly changing. I have a layout with normal columns (33% width each) on desktop, but on mobile I want the columns to stack. I attempted wrapping them with .row and using 'd-flex& ...

Retrieving information from a text document by means of data-src with the assistance of jQuery

Trying to extract text from a .txt file using jQuery while utilizing Bootstrap. New to web design with some coding experience. Button in HTML: <button type="button" class="btn btn-primary-outline-btn text-btn" data-toggle="modal ...

The warning message is thrown when trying to bind to 'style.grid' because the style value is being sanitized as unsafe

I am in the process of developing a system to define and calculate my own reusable grids. Here is an example of the output: [left-bleed-start] 10.245000000001024px [left-bleed-end content-col-start] 1331.8500000001332px [content-col-end right-bleed-star ...

The color of ngClass does not update according to the variable's value

When the value is true, I want to display a green text message and when it's false, I want it to be red. This is my angular app: In the controller, I declare a variable at the beginning and set it as true: $scope.IsColor = true; if (response.data.i ...

Organizing date values within an array using TypeScript

I need to customize a page within D365 Event Management that is coded in HTML, CSS, JS, AngularJS, and Typescript. Within an html file, I have an overview of events: <div class="spinner-container m-5" *ngIf="isLoading"> <app-spinner></ ...

"Using jQuery to target elements in the HTML Document Object Model

Is there a way to retrieve the outer HTML of a selected object using jQuery? For instance, if I have: $("#test.test_class") how can I convert it into an HTML string like this: <div id="test" class="test_class"></div> If anyone knows how to ...

JavaScript library for creating animated car movements on a map using JPG images

Looking for a way to animate a car's movement on a map? I have a map image in jpg format (not svg) and a sequence of (x,y) points ready to go! If you could recommend a JavaScript library that can help me easily create an HTML page with this animation ...

Click once to change the element, but it will remain changed and will not revert back no matter how many times you

After the first click displaying "X" and then changing to "O" in my tic-tac-toe JavaScript game, subsequent clicks only show "O", failing to switch back to "X". I am currently working on creating a tic-tac-toe game using JavaScript. Upon the first click, ...

Aggregate the divided values from an HTML form to generate data for a Google scatter chart

I am in the process of developing an online quiz and am interested in displaying the scores on a chart. My goal is to calculate the sum of comma-separated values from checked radio buttons in a form, ensuring that the result remains in the same format. I ...

Utilizing the Jquery Kenburner Slider: Playing a Local Video File

I am attempting to utilize the Kenburner slider to play a local video file, but instead of playing the video, it is initiating a download. Here is how I am trying to implement it: <iframe class=”video_clip” src=”http://localhost/cgi-bin/movies/12 ...

Problems with select tag change events

I encountered an issue with select tag onChange events. When I select a value from the select tag, it should display in a textbox that is declared in the script. It works perfectly when I remove the class "input" from the select tag, but I prefer not to re ...

Ways to avoid unintentional removal of contenteditable unordered lists in Internet Explorer 10

How can I create a contenteditable ul element on a webpage while avoiding the issue in Internet Explorer 10 where selecting all and deleting removes the ul element from the page? Is there a way to prevent this or detect when it happens in order to insert ...

The code inside the if statement is somehow executing even when the if statement is not true

Similar Question: Issue with jQuery function running at inappropriate times I've spent several hours trying to figure out why my function isn't working properly. I have a function inside an if ($window.width() < 1000) statement, but it se ...

What is the best way to adjust a Checklist's width to match the width of its parent Dropdown in Dash Plotly?

At the moment, I am facing an issue with setting the width of a checklist from Dash Core Components to match the width of the dropdown menu it is placed in. Here's a glimpse of how it appears currently: https://i.sstatic.net/mjzAd.png Below is the P ...

Tips for choosing a parent element using SCSS

Here is an example of HTML: <ul id="navbar-main" class="navbar-nav mr-auto"> <li class="nav-item active"> <a href="https://travian.dev/materials" class="nav-link nav-materials"> <span class="invisible">Mater ...