Attribute-Selectorsの記号とその意味

このQ&Aのポイント
  • Attribute-Selectorsについての記号とその意味について教えてください。
  • 具体的には、[attribute][target]と[attribute=value][target=_blank]についても教えてください。
  • ネットで検索しても情報が見つからなかったため、質問しました。
回答を見る
  • ベストアンサー

Attribute-Selectorsの記号

[attribute][target] [attribute=value][target=_blank] [attribute~=value][title~=flower] [attribute|=value][lang|=en] [attribute^=value]a[href^="https"] [attribute$=value]a[href$=".pdf"] [attribute*=value]  a[href*="w3schools"] 記号だけの意味を教えてください。 $とかです。それと一番上の [attribute][target] 上から二番目の [attribute=value][target=_blank] もお願いします。 ネットでこの部分だけ検索しましたが載っていないので質問しました。

  • nada
  • お礼率57% (1387/2414)
  • CSS
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.1

attr ~= val:値が空白区切りのリストで(例:class属性)、そこにvalが含まれるもの attr |= val:valまたはvalにハイフンが続くもの attr ^= val:前方一致(valで始まるもの) attr $= val:後方一致(valで終わるもの) attr *= val:valを一つ以上含むもの [attribute][target]:attributeとtargetのどちらの属性も指定されているもの [attribute=value][target=_blank]:attributeの値がvalueに等しく、target属性に_blankが指定されているもの。(target="_blank"はaタグにおいて、リンク先を新しいタブで開くときに用いられます。アンダーバーにCSSセレクタとしての意味はありません) 参考になれば幸いです。

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
nada
質問者

お礼

ありがとうございます。恥ずかしながら、本質問、投稿後なんどもあげました。しかし内容が忘れてしまったので、時期と形を改め、再質問させてください。

関連するQ&A

  • W3Cのバリデータで there is no attribute "target".

    W3Cのバリデータでチェックすると <a href="http://○○○.com/" target="_blank"> の行のところで 「there is no attribute "target".」というエラーがでてしまいます。 これは何がいけないのでしょうか? エラーはこれ一つだけす。 おわかりになりましたらご教授お願い致します。 DOCTYPEは↓です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    • ベストアンサー
    • HTML
  • 特殊なテキストエディタ

    <A href="901927192719.jpg" target="_blank"> <A href="901920002719.jpg" target="_blank"> このような<A hrefとblank">の間にはさまれた文字を消すことができるテキストエディタはないんでしょうか? 少しわかりにくいですね、もうすこし説明すると。 <A href="*****" target="_blank"> *=ランダムな文字。 <A href="*****" target="_blank"> これを他の文字に置き換えることができるテキストエディタはありませんか? わかりにくくてすいません、よろしくおねがいします。

  • 正規表現 最短一致と末尾

    例: <a href="http://www.google.co.jp/" target="_blank">http://www.google.co.jp/</a>&nbsp;<a href="http://www.google.co.jp/" target="_blank">http://www.google.co.jp/</a>&nbsp;<a href="http://www.google.co.jp/" target="_blank">http://www.google.co.jp/</a> 例のような文字列に文字列の最後のタグだけにヒットさせたい時下記のような検索文では全部にヒットしてしまいました。 どうも?と$を同時に使うと全文にヒットしてしまうようなのですが、うまく最後のAタグだけにヒットさせる方法はありますでしょうか? <a href=".*?</a>$

    • ベストアンサー
    • PHP
  • 垂直型のドロップダウンメニューの作成方法について

    http://jsajax.com/Articles/jQueryDropDownMenu2/1088を参考に下記のソースで垂直型のドロップダウンメニューを作成しました(動作はhttp://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、画面上部のテキストエリアに下記のソースを貼り付け「編集後クリックして実行!」で試す事が出来ます。 また、ローカルで試す場合は、ヘッダ部分に書かれているjsやcssをhttp://jdsharp.us/jQuery/plugins/jdMenu/やhttp://jquery.com/からダウンロードし、パスを調整していただければ大丈夫です)。 【ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>jQuery - DropDown Menu - Vertical (jdMenu)</title> <link href="jQuery/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.dimensions.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.positionBy.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.bgiframe.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.jdMenu.js" type="text/javascript"></script> </head> <body> <div> <ul class="jd_menu jd_menu_vertical"> <li class="accessible"><a href="#" class="accessible">第1 ≫</a> <ul> <li><a href="#">第2-1 ≫</a> <ul> <li><a href="#" target="_blank">第2-1-1</a></li> <li><a href="#" target="_blank">第2-1-2</a></li> <li><a href="#" target="_blank">第2-1-3</a></li> <li><a href="#" target="_blank">第2-1-4</a></li> </ul> </li> <li><a href="#">第2-2 ≫</a> <ul> <li><a href="#" target="_blank">第2-2-1</a></li> <li><a href="#" target="_blank">第2-2-2</a></li> <li><a href="#" target="_blank">第2-2-3</a></li> <li><a href="#" target="_blank">第2-2-4</a></li> </ul> </li> <li><a href="#">第2-3 ≫</a> <ul> <li><a href="#" target="_blank">第2-3-1</a></li> <li><a href="#" target="_blank">第2-3-2</a></li> <li><a href="#" target="_blank">第2-3-3</a></li> <li><a href="#" target="_blank">第2-3-4</a></li> </ul> </li> <li><a href="#">第2-4 ≫</a> <ul> <li><a href="#" target="_blank">第2-4-1</a></li> <li><a href="#" target="_blank">第2-4-2</a></li> <li><a href="#" target="_blank">第2-4-3</a></li> <li><a href="#" target="_blank">第2-4-4</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> ただし、実際に作ってみた所、今私が作っているサイトでは第二階層、第三階層の数が多く、 第一階層(上記ソースの「第1」)をマウスオーバーした際、すべての内容が表示されませんでした。 その為、下記のようなこと(縦だけではなく、横のスペースも有効に使いたい)を行いたいと思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 【第二階層(第三階層)の現在のイメージ】 第2-1 第2-2 第2-3 第2-4 【第二階層(第三階層)のやりたいイメージ】 第2-1 第2-2 第2-3 第2-4 以上、よろしくお願いします。

  • HTMLの<a>タグで [テキスト文(.txt)] をIE以外(テキストエディタなど)で開けますか?

    たとえば <a href="test.txt" target=_blank> (あるいは、<a href="test.txt" target="(ジャンプ先)">)とした場合…  テキスト文はIEブラウザで html と同じように開きますが、 これをいきなり「ノートパッド」や「他のテキストエディタ」で開くようにできますか? つまり、<a href="test.pdf">PDF</a> ですと、いきなりAdobeのリーダーが開きますが、これと同じように、<a href="test.txt">をテキストエディタで開きたいのですが…。  よろしくお教え下さい。

    • ベストアンサー
    • HTML
  • php正規表現 相対パス→絶対パス

    下記のようにhtml内の相対パスの箇所を、 全て絶対パスに置換えるにはどう記述したらよいでしょうか? ご伝授いただけたら幸いです。 <a href="/test/jp/danny.pdf" target="_blank"> <img src="/cmn/img/text.gif">   ↓↓   ↓↓ <a href="http://testsaite.co.jp/test/jp/dammy.pdf" target="_blank"> <img src="http://testsaite.co.jp/cmn/img/text.gif">

    • ベストアンサー
    • PHP
  • <A href= と<IMG srcの使い分け

    <A href= と<IMG srcの使い分けについて伺いたいのですが 一応は以下のようになっていると思っておりますが、 基準がどこにあるのでしょうか? <A href=の対象について <A href="mailto:○○○○○○">   アドレス <A href="○○○○○○.html">  URL等 <A href="image.pdf" target="_blank">  PDF等を開かせる <IMG src=の対象について <IMG src="○○○.gif"等の様に、画像の拡張子になっている。

    • ベストアンサー
    • HTML
  • pdfのhtmlに指示を与える書き方について

    (1)pdfを開かせるためのhtmlに指示を与える書き方ですが、以下の文章のタグの中に<A href="image.pdf" target="_blank">がありますが  target=は なんの役割をしてるのでしょうか?  (2)pdfを開かせるためのhtmlに指示を与える一般的な書き方はどのようになるのでしょうか?   <A href="image.pdf">○○○  でいいと思うのですが、Webブラウザには○○○が出ただけで、それをクリックしても四角の中に赤のXしか出てきません。  Adobe Reader 7.0が入ってます。windows XP SP2にするまえにはpdfのページから pdfを開けたのですが、環境が変わってから、四角の中に赤のXしか出てきません。 Webでなしに、直接作成したPDFファィルは開きます。 Adobe Reader 7.0とwindows XP SP2の関連が分かりません。原因をご存知でしたら教えてください! <A href="image.pdf" target="_blank"><IMG src="pdf.gif" width="35" height="35" border="0" alt="AAAPDF">

    • ベストアンサー
    • HTML
  • ウィンドウを新しく開いてそのウィンドウをページ替えしたい。

    <a href="http://oshiete.goo.ne.jp/" target=_blank>サイト1<a> <a href="http://oshiete.goo.ne.jp/" target=_blank>サイト2<a> <a href="http://oshiete.goo.ne.jp/" target=_blank>サイト3<a> 例えばサイト1をクリックして新しいウィンドウが開いた後、サイト2をクリックした場合また新しくウィンドウが開くのではなく、サイト1が開いたウィンドウに サイト2を表示させたい時はどうしたらいいのですか?

    • ベストアンサー
    • HTML
  • defineの出力先で文字化け

    define('○○','<a href="http://www.goo.ne.jp" target="_blank">Goo</a>'); とすると出力先のソースで &lt;a href=&quot;http://www.goo.ne.jp&quot; target=&quot;_blank&quot;&gt;○○&lt;/a&gt; となってしまい <a href="http://www.goo.ne.jp" target="_blank">Goo</a> がそのままの形で表示されてしまいます。 どうしてこうなるのでしょうか。

    • ベストアンサー
    • PHP