Converting XPath into CSS

I really need your assistance in converting XPath to CSS. I have this code snippet and XPath expression: 

/descendant::p/parent::*/child::p[position()=1]
... The selected elements will be (B D F H)

<?xml version="1.0" ?>
<book>
     <title>A</title>
     <p>B</p>
     <p>C</p>
<chapter>
    <p>D</p>
    <p>E</p>
    <section>
        <p>F</p>
        <section>
            <title>G</title>
            <p>H</p>
        </section>
        <p>I</p>
    </section>
</chapter>

Could you please guide me on how to translate this XPath expression to CSS?

cssxpathcss-selectors

Answer №1

It's a little unclear what specifically you are searching for, but by utilizing the p:first-of-type selector, you can target the first paragraph elements within their parent:

p:first-of-type {
  background-color: gold;
}

The selected elements such as B, D, F, H are affected: View Demo.

Answer №2

Give this a shot:

h1:first-of-type {
    /** Customize your styles below **/
    font-size: 24px;
    color: blue;
}

Compatible with all major browsers and IE10+

Check out the source

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

Concealing the rear navigation button within the material carousel

I have a material css carousel, and I am trying to hide the back button on the first slide. I attempted to use the code below from a previous post The following code snippet prevents the user from looping through the carousel indefinitely. Stop looping i ...

javascriptjqueryhtmlcssmaterial-design

What is the method for setting up vertical tabs?

Is it possible for someone to provide guidance on how to create vertical tabs for the HTML content below? When a tab, such as tab1 in the left column, is clicked, only the content of tab1 should be displayed in the middle column. The same applies for tab2 ...

jqueryhtmlcssjquery-ui

Swapping out an image using CSS

Previously, the most common method for "removing" text from elements was through text-indent: -9999px, however, it is now recommended to use text-indent: 100%; white-space: nowrap; overflow: hidden; This way, the browser does not need to create a huge 9 ...

cssoverflowfont-sizetext-indent

How to choose an option from a dropdown menu using React

In a React application, I am creating a straightforward autocomplete feature. The code is outlined below. index.js import React from 'react'; import { render } from 'react-dom'; import Autocomplete from './Autocomplete'; co ...

javascripthtmlcssreactjsautocomplete

Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below: <span class="day-number">{{day-number}}</span> <div class="event-box"> <div class="event-container"> </div> <div class="more-events">more ...</div> </div> The .e ...

javascriptjqueryhtmlcss

Unable to choose anything within a draggable modal window

Can someone please assist me? I am struggling to figure this out. I can't select text inside the modal or click on the input to type text into it. I suspect it may be due to z-index issues, but I'm having trouble locating them. var currentZ = n ...

javascripthtmlcssangularjs

What is the best way to allow wider list items to overflow their absolutely positioned container?

My challenge involves a list that is dynamically populated, and I require it to be wider than its absolutely-positioned parent (specifically a custom <select> element implementation). #wrapper { position: relative; border: 1px ...

htmlcssinternet-explorer-11

Troubleshooting: ReactJS CSS Class Issue

I'm fairly new to working with ReactJS and I've encountered an issue while trying to create a class for a specific form. Below is the code I've written: import React, { Component, PropTypes } from 'react'; import s from './s ...

javascripthtmlcssreactjs

Two flexible-sized containers placed side by side, with an ellipsis displayed on the left container

Can you achieve a layout where two elements are inside a container and float side-by-side? The right element should adjust its size based on the content while the left element fills the remaining space in the container with an ellipsis to truncate overflow ...

htmlcssdynamicellipsis

Generating XPATH for SVG element

Attached is the HTML code for an SVG element, can someone assist me in creating the corresponding XPATH? <svg data-reactid=".1q.0.3.1.0" version="1.1" class="svg-connector"> <circle data-reactid=".1q.0.3.1.0.0" r="7" cy="11" cx="11" class="i ...

seleniumsvgxpathselenium-webdriver

Do the last block in the table occupy the remaining space in the row?

Trying to create an HTML email calendar and struggling with getting the last td to fill the remaining space without affecting the width of other rows. Is there a way to increase the width of just the 4th block on the last row to fill the empty space? Here ...

htmlcss

Guide to vertically aligning text in an overlay using CSS within Angular 2

I currently have an overlay on my page that displays a spinner (an Angular material component) and accompanying text. This overlay covers the entire page and prevents clicking on elements below it. The spinner is positioned in the center of the page, and ...

cssangularoverlay

Output Scalable Vector Graphics (SVG) content on a webpage

I need to include an SVG element in my Angular 2+ code. My goal is to provide users with the option to print the SVG element as it appears on the screen. <div class="floor-plan" id="printSectionId2" (drop)="onDrop($event)" (dragover)="onDragOver ...

javascripthtmlcsstypescriptsvg

Struggling to eliminate the underlines from an HTML hyperlink

Can someone help me figure out how to remove the annoying underline link that pops up when hovering over an a element in HTML? I attempted adding a style="text-decoration: none" attribute to the a link, but the underline persists when I hover over the text ...

htmlcss

What is the method for ensuring text remains within a square while it is being relocated?

Check out this jsfiddle where you can interact with a moving square: http://jsfiddle.net/helpme128/3kwwo53t/2/ <div ng-app="test" ng-controller="testCtrl"> <div id="container"> <div class="shape" ng-draggable='dragOptions& ...

javascripthtmlcssangularjs

Adjust image size to maintain consistent dimensions

Is there a way to resize the images so they maintain the same aspect ratio? Currently, all the images are appearing distorted. https://i.sstatic.net/czpto.png Here is the HTML code for the card: <div class="container"> <div class="flex- ...

htmlcss

Why is it important to incorporate the CSS property background-repeat: repeat; into our code?

It is believed that if you don't expressly mention the background-repeat in CSS styling, browsers will automatically set it as background-repeat: repeat. With this default behavior in place, one might wonder why there is even a need for a separate ba ...

htmlcss

I'm confused as to why the icon color isn't changing on the Blogger homepage for each individual user

I'm experimenting with changing the eye color based on visitor count. It works perfectly fine on static posts in my Blogger, but it fails to update the eye color properly on my homepage according to the set numeric values. Instead of displaying differ ...

javascriptcssblogger

The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content. Below is the HTML code snippet: <div id="postCommentEditor" class="postCo ...

javascripthtmlcssquill

What is the best way to align a series of divs vertically within columns?

Struggling to find the right words to ask this question has made it difficult for me to locate relevant search results. However, I believe a picture is worth a thousand words so...https://i.stack.imgur.com/LfPMO.png I am looking to create multiple columns ...

javascriptjqueryhtmlcss