Can we set a specific data type for the first element in a list?

I'm trying to figure out how to make this CSS example work the way I want it to.

<!DOCTYPE html> 
<html>
<head>
<style type="text/css">
.col p:first-child {
   background:yellow;
}
</style>
</head>

<body>
<div class="col">
    <h1>Woot</h1>
    <p>I am a super nun. I am a super nun.</p>
    <p>I am a super nun. I am a super nun.</p>
</div>
</body>
</html>

Basically, I need to style the first <p> of an element in a specific way, but the first-child selector doesn't work if it's not actually the first child. Is there a way in CSS to select the first child of a specific type?

htmlcsscss-selectors

Answer №1

Fortunately, CSS3 provides a solution for selecting the first element of its type using the :first-of-type pseudo-class (unlike other options such as first with a class or attribute).

.col > p:first-of-type

However, the downside is that browser support for this feature is limited, with only IE9 supporting it among all versions of Internet Explorer.

If the structure of your .col element follows a certain pattern, like always having one specific element followed by a p, you can achieve a similar effect using just CSS2 selectors:

.col > :first-child + p

Answer №2

That's referring to the :first-of-type pseudo-class.

The :first-of-type pseudo-class targets an element that is the first of its kind among its siblings within the parent element.

Now I just need to confirm its browser support.

Here's the quirksmode compatibility table for your reference. In short, no luck with IE versions older than 9.

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

Challenges faced when creating a dynamic HTML and CSS slider

I recently added some code from a CodePen to my website. While the code is functioning correctly, it seems to be causing issues with other content on my page such as links and images. Any idea why this might be happening and how can I fix it? :) HTML &l ...

htmlcsssliderresponsive

I'm currently developing a vertical calendar application using Django

Currently, I have come across this django-calendar. However, I am in need of a vertical calendar (apologies for not finding any in English). The desired layout would consist of weekday headers on the left and month names at the top. My approach involved o ...

pythonhtmldjangopython-3.xcalendar

The chosenValues.filter method hit an unexpected token; a comma was anticipated

I have encountered a syntax error in the following line: queryComponents: prevState.seletedValues.filter((a, i) => (i !== index)); I am attempting to swap out splice with filter. I've attempted modifying brackets, both adding and removing them, b ...

javascripthtmlreactjsreduxmaterial-ui

Steps for Adjusting Column Heights in Bootstrap 4

Currently, I am experimenting with Bootstrap 4 and facing some challenges in setting the correct heights for my layout. The elements in my design include a "side nav", "header", "main", and "footer". My goal is to make the "main" section occupy most of th ...

htmlcssbootstrap-4

Changing the direction to reverse column will cause the navigation component to be hidden

Issue: The <Navigation/> components disappear when using flex-direction: column-reverse. However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible. My objective is to display my <Navigation/> ...

htmlcssreactjs

Transform percentage into pixels

I'm currently utilizing this specific JavaScript range slider and my goal is to define a minimum and maximum value in pixels, rather than the default percentage range from 0 to 100. I have successfully implemented the min and max settings, now my nex ...

javascriptcss

Issue with Font Awesome (6.2) Duotone not displaying correctly in Bootstrap 5 breadcrumb divider

I attempted to modify the Bootstrap 5.2 breadcrumb divider and include a Font Awesome Duotone icon, but it is not displaying. I am unable to figure out what the issue might be. Any suggestions would be greatly appreciated. Thank you. One interesting disco ...

htmlcssfont-awesomebootstrap-5

First attempt at creating a website and experimenting with adding a secondary color background using CSS

As I embark on the journey of launching my website, I am faced with the challenge of working with CSS for the first time. I decided to purchase a custom theme from themeforest to kickstart my project. My goal is to have two background colors on my website: ...

cssweb

Can we enclose a div within a bootstrap row, but not as a grid item

Can a div be wrapped inside a row without using column classes? While it is technically possible, some may argue that it is not the best practice. Let's explore this further. Take a look at the example below: <div class="row"> <div class=" ...

htmlcsstwitter-bootstrapbootstrap-4

Display the definitions of entities within the titles of div elements

Within a React application, this block of HTML is present: <div className="my-class" title={myValue}> <div>{myValue}</div> </div> The value of myValue is MyCompany™. The inner div displays the content correctly. Ho ...

htmlreactjscharacter-set

The selection box for cities is not filling in with options

I am working on a dynamic city loading feature for a select tag in HTML. After selecting a state, I want to load the cities using an ajax call. While I am successfully logging the returned data to the console, I am struggling with populating the select op ...

phpjqueryhtmlajaxhtml-select

Is there a function called 'onViewportChange' in media queries that triggers a search in the .css file for applicable styling?

So I'm not entirely sure about all the specifics, but my understanding is that each time a new HTML element is created, it checks through all linked CSS files and inline styles to see if those styles should be applied to that element. This suggests t ...

htmlcssbrowser

Exploring the benefits of incorporating the vendor folder in website development

I'm embarking on the journey of creating a website from scratch with python, django, and bootstrap. I've noticed that it's common practice to store js, css, img, and fonts in a folder named vendor, like this: /static/js/vendor/bootstrap/boo ...

javascripthtmlcssbootstrap-4

Is there a way to retrieve the complete date and time from a Beautifulsoup ResultSet?

My current challenge involves utilizing selenium and beautifulsoup to retrieve the date and time of an Instagram post. I am encountering difficulty in extracting the datetime element from the HTML. from bs4 import BeautifulSoup from selenium import webdriv ...

pythonhtmlseleniumbeautifulsoup

Issue with Color Attribute in Heading within an Ionic Content Element

The color attribute doesn't seem to be working in Ionic 2. It works fine with normal Ionic tags, but not with HTML tags. Can someone help me with this? The code is provided below. <ion-content> <div class="page-home"> <h1 color="second ...

htmlcssionic-frameworkionic2

The overflow-x property causes the left side of the component to be cut off when scrolling

When the screen width is insufficient to display a component properly, I need it to be horizontally scrollable. However, when scrolling to the left after making it scrollable due to a smaller screen size, the left side of the component gets cut off and can ...

cssreactjsstyled-components

Struggling with Bootstrap 4 - need help with navbar and flexbox alignment issues

My goal is to recreate a navigation bar similar to this design: navbar I initially attempted to use the grid system for my navbar, but it didn't work out as expected. After some research, I found that using the grid system for navbars is not recomme ...

htmlcssbootstrap-4

Steps to display a div on top of a background image

Here is a visual representation of my design for better understanding: I am currently working on developing the central content that overlays the image. However, when I insert divs with background colors into my HTML to test their placement, I do not see ...

javascriptjqueryhtmlcss

A guide to styling a Bootstrap 5 navigation bar

My goal is to have my Bootstrap 5 navigation menu wrap until reaching an xs-sized screen and then display the small screen pills. Currently, it does not wrap properly and when it reaches xs size, the menu disappears without showing the pills. Here's m ...

htmlbootstrap-5

Ways to create diagonal or vertical table breaks using CSS

If you have a <table> that is very tall or wide and you want it to wrap for screen display, how can this be achieved using CSS? For example, a table that is 300% page height and 30% page width would be divided into three parts. # # # # # # beco ...

htmlcsshtml-table