同じページでリンクの色を変える

Question

同一ページ内でa:linkの設定を変える方法がありますか。
最初はCSSでclassの設定で簡単にできると思いましたが、
そもそも .site { a:link { red } } とかってできないですよね？

ORUKA1951 · Accepted Answer

No.3です。
＞詳細度とか見たことすらないですけど、階層構造の深さだなとは何となく分かります。

CSS(カスケーディングスタイルシート)を使うときは、プロパティより先に、カスケーディングの仕組みを学んでおかないとなりません。そうしないと、要素(タグ)にいちいちIDやclass名を振ってしまい、とんでもない文字数のHTMLが出来上がるし、後から「わけわかめ」になります。
　HTMLは文書構造を示し、スタイルシートでプレゼンテーションを指定することでHTMLは極めて簡略化できる・・はずなのに・・divやclassやidてんこ盛りの巨大なHTMLを書いてしまう。

決して難しいものじゃなくて、ごくごく一般的に理解できる常識的な内容です。
a:link{color:magenta;} /* 詳細度[0,0,0,1] (colorは継承するプロパティ) */
リンクのa要素の色はマゼンタにしましょう。

div.header a:link{color:red;} /* (1)詳細度[0,0,2,2] */
　headerクラスのdiv(汎用ブロック)の子孫( 半角スペース)のリンクaは赤ですよ。

div.header div.nav a:link{color:green;} /* (2)詳細度[0,0,3,3] */
　しかし、その中のナビゲーションブロック内のリンクaは、緑

div.header div.nav a+a+a:link{color:aqua;}/* (4)詳細度[0,0,3,5] */
　そのうちで、兄にふたつのaをもつa:linkは水色

div.header div.nav a+a:link{color:yellow;}/*  (3)詳細度[0,0,3,4] */
　兄がふたつのaは水色

div.section p a:link{color:blue;}/* (5)詳細度[0,0,2,2] */
　一方本文(section)内の段落中のa:linkは青

(6)は詳細度が[1,0,0,0]として計算される。

詳細度は
*(全称セレクタ)、タグの属性(<body link="blue">)はゼロ
要素(タグのこと)、擬似要素(:first-leterとか)は、d=1
属性a[href]、クラス(a.class)、擬似クラス(:linkとか)は c=1
一意セレクタ(ID)は、b=1
HTMLの属性中のstyleでの指定は、a=1
[a,b,c,d]という数として数えます。

そのプロパティが継承されるか否かは常識的なものです。たとえばcolorプロパティは、親の段階で決めれば子々孫々まで有効ですが、borderプロパティは継承されません。

値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

カスケーディングスタイルシートの本当に大事な根幹部分です。もし理解していれば、HTMLをどう書けばよいかもわかるはずです。idはリンクの終端、class名は文書(の意味的)構造を示すものをつける。と言う意味は、CSSのCを知ると理解できるかと。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より

ORUKA1951 · Answer

a要素でには、href属性やname属性をもちますから、a:linkとは、の意味ですね。わたざわたざclassなどで悩む必要はありません。HTMLが文書構造にしたがって正しくマークアップされていれば・・・ [例] 　　

見出し

なんたらかんたらリンクへ

コラム記事

なんたらかんたらリンクへ

・・・・・だとしたら、 a:link{color:magenta;} /* 詳細度[0,0,0,1] (colorは継承するプロパティ) */ div.header a:link{color:red;} /* (1)詳細度[0,0,2,2] */ div.header div.nav a:link{color:green;} /* (2)詳細度[0,0,3,3] */ div.header div.nav a+a+a:link{color:aqua;}/* (4)詳細度[0,0,3,5] */ div.header div.nav a+a:link{color:aqua;}/* (3)詳細度[0,0,3,4] */ div.section p a:link{color:blue;}/* (5)詳細度[0,0,2,2] */ (6)は詳細度が[1,0,0,0]として計算される。　CSS(カスケーディングスタイルシート)のカスケーディング機能を使うと、HTMLさえきちんと書けていれば、スタイルシートのためだけにclass名やidを使わなくても、特定の部分の要素のスタイルホ変更できます。　カスケーディングは、スタイルの出所、継承、詳細度などをひっくるめて利用します。

gungnir7 · Answer

こちらから応用ができるでしょう。
http://www.scollabo.com/banban/apply/ap5.html

タグに直接当てれば良いのだそうです。
タグごとにという話であれば、ol headerとかを作って
ol header li a:{linl:red}とかでやれば良いでしょう。
これでvisitedとかもいけると思いますが未検証なので悪しからず。

Ma-yan_bh1011 · Answer

＞.site { a:link { red } } 
入れ子はできないけど、できたとしてもする必要なんてない。
.site {
　color: #000000;
}
これで<a class="site">が黒になる。

というかlinkなんてわざわざ明示することないと思う。
だからこんな基本中の基本のところなのに要らん混乱してしまったんじゃないでしょうか。

同じページでリンクの色を変える

No.3です。

この回答への補足

a要素でには、href属性やname属性をもちますから、a:linkとは、<a href="">の意味ですね。

こちらから応用ができるでしょう。

＞.site { a:link { red } }

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング