.セレクタ名1 .セレクタ名2 ｛ ；｝ ←htmlのどこにもないセレクタ名2はどこから？

Question

最近html、cssを学びはじめたばかりの初心者です。
わからないことが多く、連日の質問になってしまい申し訳ございません。

標題の件についてですが、 難しい設定を加えようとしたとき、検索してどこかのブログ等からコードをコピペすることがよくあります。
例えば下記の場合は、「固定ヘッダーをある程度スクロールしたら縮小表示」したい場合のコード(http://cly7796.net/wp/javascript/small-to-display-a-fixed-header-when-scrolling/より引用)なのですが、cssには

.header .inner {;}

というセレクタ名があります。

/* 通常のヘッダー */
.header {
    position: fixed;
    width: 100%;
    background: #ccc;
}
.header .inner {
    width: 960px;
    margin: 0 auto;
}
.header a {
    display: block;
    padding: 20px 0;
}
.header .header-logo {
    float: left;
    width: 300px;
}
.header .header-nav {
    float: right;
    width: 600px;
}
.header .header-nav li {
    float: left;
    width: 120px;
    text-align: center;
}
 
/* スクロール後のヘッダー */
.header.fix a {
    display: block;
    padding: 5px 0;
}

ところがhtmlには「inner」というクラス名が付与されたコンテンツはどこにもありません。

<header class="header">
    <div class="inner clearfix">
        <div class="header-logo"><a href="">ロゴ</a></div>
        <nav class="header-nav">
            <ul>
                <li><a href="">ナビ1</a></li>
                <li><a href="">ナビ2</a></li>
                <li><a href="">ナビ3</a></li>
                <li><a href="">ナビ4</a></li>
                <li><a href="">ナビ5</a></li>
            </ul>
        </nav>
    </div>
</header>

セレクタの種類を色々と調べてみましたが、クラス名の一部を省略しているような書き方は、見つけられませんでした。

しかしコピペしてみると、きちんとcssが適用されるのです。

下記のコードとは違うものですが、たまにコピペしたコードで見かけるので、ある時それらしきクラス名を(今回でいえばinnerをinner clearfixに)全て打ち直してみたら、適用されなくなりました。
また、半角スペースの前ではなく、逆に半角スペースの後のみ記載しているコードも見かけます。

例）
カルーセルスライダーで、htmlに<div class="slider mypattern">の表記あり
→このとき、cssに.mypattern {;}との記載
※逆にslider mypatternという記載がcssのどこにも書かれていない

これはどういうことなのでしょうか？

子孫セレクタをはじめとするセレクタの記載方法の色々や、疑似要素も学んではいるのですが、さまざま検索してみてヒットしなかったので、こちらで教えていただけたら嬉しいです。
実は初歩的なことでしたら、申し訳ございません。
何卒よろしくお願い致します。

追記

javascriptの中身です。

$(function() {
    headerAdjust('.header');
    $(window).on('scroll', function() {
        headerAdjust('.header');
    });
});
 
// ヘッダーのサイズ調整
var adjustPoint = 20;
var adjustClass = 'fix';
function headerAdjust(tgt) {
    var scrollTop = $(window).scrollTop();
    if(scrollTop > adjustPoint) {
        $(tgt).addClass(adjustClass);
    } else {
        $(tgt).removeClass(adjustClass);
    }
}

Answer 1

ところがhtmlには「inner」というクラス名が付与されたコンテンツはどこにもありません。

<div class="inner clearfix">がそれです。

Comments

[works_noname]

ご回答ありがとうございます。
そうなんですね……。そうなると、clearfixはどこへいってしまったのでしょうか？
初歩的過ぎて説明するまでもないようなことでしたら、セレクタの何について勉強し直した方が良いなど、勉強すべき種目（？）を教えていただけると嬉しいです。すみません。

[maisumakun]

> clearfixはどこへいってしまったのでしょうか？

clearfixはclearfixで適用されます。

[works_noname]

ご回答ありがとうございます。
clearfixがわからず検索したら、下記のサイトにあたりました。
https://web.bridge-net.jp/blog/1093/
こちらでも唐突にclearfixが出てきて、？？？状態です。
このあたりが勉強不足なようなので、clearfixからまずは色々調べてみたいと思います。
初歩的な質問ですみません。ありがとうございました。

[maisumakun]

> こちらでも唐突にclearfixが出てきて、？？？状態です。

慣習的な意味合いはありますが、clearfixも「単なるクラス」です。

[works_noname]

何度もありがとうございます。
さらに色々調べましたが、もしかして先に記載した参考サイトの場合は、変更後のhtmlの記載がなかった為に、唐突に現れたように見えただけで、実際にはhtmlの必要箇所にclearfixというクラスを付与している、ということなのでしょうか。
「単なるクラス」と聞いて、少し安心しました。

他のご回答者様とのお話で、cssにclearfixの記述がないのにhtmlには記述がある点については、未だに疑問なのですが、何よりもclearfixについて理解したいと思います。
検索してみると、まだまだclearfixについて先輩方が記載してくださっているようなので、各ブログを見てまわります。
何度も誠にありがとうございます。

Answer 2

class グローバル属性 は、要素のクラスを空白区切りで並べたリストです。

class - HTML: HyperText Markup Language | MDN

ということですから、class="inner clearfix"は、innerとclearfixとの二つのクラスが付与されている、ということです。

Comments

[works_noname]

ご回答ありがとうございます。
いただいたお返事から、「class　グローバル属性」で検索してみたところ、下記のサイトにあたりました。
https://wp-p.info/tpl_rep.php?cat=css-biginner&fl=r10

これは、例えば

<p class="test1">文字サイズは15pxにしたい</p>
<div class="test1 test2">子要素の文字サイズを15pxにして、文字の色を変えたい</div>

というとき、

.test1 {font-size: 15px;}
.test2 {color: red;}

と記述すれば、divに適用したいcssの記述が1行減る→これを多様していけばコードが少なくなり、読み込みが速くなる、ということなのでしょうか？

どれがどの記述がわからなくなることが多いので、私はいつもわかりやすい名前をいちいちつけているのですが、読み込みなど実用性を考えると、みなさんはよく使っている手法ですか？

また、質問内容に関していえば、clearfixという記述はなく、かわりに　fix a という記述があるのですが、これはどういうことなのでしょうか？
2つのクラスを付与する理由がわからないのですが……。

[Lhankor_Mhy]

> 2つのクラスを付与する理由がわからないのですが……。

使わなくても、特段の害はないと思いますので、気にしなければいいのでは。

そのうちに、「ああ、一つの要素に複数のクラスを定義できたら便利なのに！」と思う時が来たら、このことを思い出せばいいのではないかと思います。

[Lhankor_Mhy]

もしかしてそういう意味ではなくて、CSS の中に clearfix というクラスがないのに、なぜ指定しているのか、ということですか？

色々な可能性が考えられると思います。
・作った人が使うのを忘れた
・以前は使っていたが、CSSの変更によって使われなくなった
・JavaScriptで利用している
・フレームワークで出力されているが、デザインする際に付与するスタイルがなかった
・works_noname さんが見落とした

[Lhankor_Mhy]

>読み込みなど実用性を考えると、みなさんはよく使っている手法ですか？

最近の流行ですと、たとえばBEMなどの手法では、複数クラスは避ける傾向にあります。

[works_noname]

ご回答ありがとうございます。
＞2つのクラスを付与する理由がわからない
という質問の意図としては、おっしゃる通り、どちらもです（なぜ複数クラスを定義する必要があるのか、そして例でいえば記述がないものを何故指定しているのか）。

前者については便利な場面がまだわからないので、お返事の通りに覚えておくくらいにします。
後者については、別の回答者様のお返事を参考に調べてみたところ、よくわからないのですが、cssやhtmlが記述がなくても唐突に出てきている（ように初心者には見える）説明があり、とりあえずclearfixがなんなのかを知らないのが原因なのかなと思っています。

ちなみにjavascriptにはfixとの記載はありましたが、clearfixとの記載はありませんでした。
（もともとfixという何かがあり、clearfixはそれの亜種というか種類のひとつ？）
念のため、追記でjavascriptも記載しておきます。

＞実用性について
BEMというのも、はじめて聞きました……。調べてみます。

webひとつ作るのにも、覚えることがいっぱいで状況も人それぞれで、奥が深いですね。
このような初歩的な質問に、ご丁寧なお返事を誠にありがとうございます。
これからも勉強頑張ります。