(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回]