質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
XPath(XML Path)

XML Path Language (XPath; XMLパス言語)は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文の事をいいます。XPathはXMLとは別の構文を使用します。XMLドキュメントの抽象、論理ストラクチャ上で動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

1040閲覧

CSS・XPathで複数の兄弟要素(p要素)が別の要素(divなど)で区切られている時、特定のp要素のみを選択する方法

kuma3

総合スコア60

XPath(XML Path)

XML Path Language (XPath; XMLパス言語)は、マークアップ言語 XML に準拠した文書の特定の部分を指定する言語構文の事をいいます。XPathはXMLとは別の構文を使用します。XMLドキュメントの抽象、論理ストラクチャ上で動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/10 02:58

こんにちは。

HTMLで次のような構造があった時、どのように<section><div>で区切られている前の方のp要素(2つ)を指定したらいいでしょうか?
CSSまたはXPathでの指定方法を教えて頂きたいです。

なお、今回のHTML構造は一例で、前にあるp要素の数はページによって変化するため、nth-childで特定することはできません。
また、HTML構造を修正して、classやidを追加することもできません。

HTML

1<div class="body"> 2 <p>前のp要素</p> 3 <p>前のp要素</p> 4 <section class="section"> 5 <h3>h3要素</h3> 6 </section> 7 <div class=middle"></div> 8 <p>後のp要素</p> 9 <p>後のp要素</p> 10</div>

お手数ですが、教えて頂けると助かります。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

動的に出力される記事とかに反映させる感じでしょうか。
あまりきれいではありませんが、簡単にするのであれば。。

css

1.body p { 2 /* 前のp要素に適応したいものを全体に反映 */ 3 color: #f00; 4} 5.body .section ~ p { 6 /* .section以降のものを元に戻す */ 7 color: #000; 8}

投稿2019/01/10 09:37

noRiwo

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

xpath href 取得 - xpathを使ってノードの位置を求める の記事を応用して、section タグの手前のポジションを取得し、変数に記憶します。
続いて、その変数の示す番までのノードを選べば、前の P の要素が取得できます。

投稿2019/01/10 06:05

seastar3

総合スコア2285

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問