kledgeb Ubuntuの使い方や日本語化、アプリの使い方を紹介しています。 Ubuntuの最新情報も紹介しています。

兄弟要素を展開する略記の記述方法

  兄弟要素を展開する略記の記述方法です。


  前回は下位要素を展開する略記の記述方法を紹介しました。

  今回は、兄弟要素を展開する略記の記述方法を紹介します。
  「li」要素など、同じ種類の兄弟要素を複数展開したい時は、「同じ種類の兄弟要素を展開する略記の記述方法」を利用すると良いでしょう。

  略記のフォーマット

    略記のフォーマットは以下のようになります。

要素+要素+要素・・・

  1-1.略記の入力

    ここでは例として、以下のように入力します。


div+div

  1-2.略記の展開

    略記を展開すると、以下のように要素が展開されます。


  2-1.略記の入力

    下位要素を展開する略記と組み合わせてみます。
    ここでは例として、以下のように入力します。


div>p+div+span

  2-2.略記の展開

    略記を展開すると、以下のように要素が展開されます。


id属性とclass属性付きで要素を展開する略記

  前回紹介したid属性とclass属性付きで要素を展開してみます。

  1.略記の入力

    ここでは例として、以下のように入力します。


div>p#p1+div#div1+span.span1

  2.略記の展開

    略記を展開すると、以下のように要素が展開されます。


任意の属性を展開する略記の記述方法

  任意の属性を展開する略記の記述方法です。
  この略記方法を利用すれば、id属性やclass属性以外の属性を指定することができます。

  略記のフォーマット

    略記のフォーマットは以下のようになります。

要素[属性=値 属性=値・・・]

  1-1.略記の入力

    ここでは例として、以下のように入力します。


a[href=http://www.]

  1-2.略記の展開

    略記を展開すると、以下のように指定された属性付きで要素が展開されます。


  2-1.略記の入力

    複数の属性を指定する例です。
    ここでは例として、以下のように入力します。


div[myAttr=attr1 myAttr2=attr2]

  2-2.略記の展開

    略記を展開すると、以下のように指定された属性付きで要素が展開されます。


    補足

      属性名を大文字で入力しても、小文字に変換して展開してくれます。


関連コンテンツ
同一カテゴリーの記事
コメント
オプション