(1)$()関数で命令の対象となるHTML要素をJQオブジェクトに変換し、
(2)そのJQオブジェクトに対してメソッドを呼び出して変更を加える
<body>
<header class="page-header" role="banner">
<h1>Creative jQuery Sample</h1>
</header>
<div class="page-main" role="main">
<div id="typo">
<div class="inner">Creative jQuery</div>
</div>
</div>
<footer class="page-footer" role="contentinfo">
<small class="copyright">COPYRIGHT © <a href="http://www.shiftbrain.co.jp" target="_blank">SHIFTBRAIN Inc.</a></small>
</footer>
</body>
$(function(){
$("#typo").css("color", "#ffff00");
$(".page-main > div:nth-child(1) .inner").css("opacity", 100);
$("#typo .inner").css("transform", "rotate(10deg)");
});
＜参考＞
タイポ 【 typo 】
英単語のタイプミス(ミススペリング)のこと。"typographical error" を省略した印刷業界の業界用語だったものが一般に普及したもの。
単純な打ち間違えによる綴りの誤りを意味するが、転じて、日本語の誤変換などを含む誤入力全般を指す場合もある。
CSSに書かれている#は、タグではなく、一意セレクタと呼ばれるものです。
HTMLに書かれている#は一意性(Uniqueness)アンカーです。
文章の特定の一要素を示すときは、<a name="wrapper">とか、<h1 id="wrapper">などと指定しますね。
どこかからリンクするときは、<a href="#wrapper">となります。
一方、CSSもその要素を指定するときは、
a#wrapper とか h1#wrapper あるいは、#wrapperのように指定します。
CSSでは、以後に続く{宣言}で記述する設定が適用される場所を指定するためにセレクタ(selctor)を使います。こんなのがありますね。
全称セレクタ *
タイプセレクタ 要素名
子孫セレクタ 要素名 要素名
子セレクタ 要素名>要素名
隣接セレクタ 要素名+要素名
属性セレクタ 要素名[属性]
クラスセレクタ 要素名.クラス
一意セレクタ 要素名#一意性アンカー
ですので、HTML内にある唯一のid="wraper"などで示されている要素を指定するという意味です。
[0回]
