まず疑似要素、疑似クラスって何？

CSSでよく使われている疑似要素と疑似クラス。
よく使われる物としては::afterや:hoverなどがありますよね。
ちなみに::afterは疑似要素、:hoverは疑似クラスとなっています。
ではそれぞれの違いについてまとめていきたいと思います。

疑似要素とは？

「擬似要素とは、選択された要素に対してスタイルを適用することができます。」
これだといまいちわかりづらいと思いますので例をあげたいと思います。
例えば以下のように擬似要素を使わずに文字の最初の文字だけ色を変えたい場合はこうなります。

html

<h1><span>サ</span>ンプルテキスト</h1>

css

span{
 color: #f00;
}

しかし擬似要素を使えばこうなります。

html

<h1>サンプルテキスト</h1>

css

h1::first-letter{
 color: #f00;
}

無駄なspanタグを記述しなくてよくなりました。
このように選択された要素の特定の部分を指定して修飾するものを擬似要素と言います。
ちなみにCSS3から疑似要素は疑似クラスとの区別をつけるためにコロンを２つ付けるようになりました。
(ですが１つでも表示はされます。)

どんな擬似要素があるか

• ::before
• ::after
• ::first-letter
• ::first-line

など

実際に擬似要素を適用させたのがこちら

See the Pen
Pseudo-elements by taka (@gb-sweep)
on CodePen.

疑似クラスとは？

擬似クラスは選択される要素の特定の状態の時にスタイルを適用させるものです。
こちらはまだわかりやすいとは思いますがもう少しわかりやすく説明するならば、
よく使われるa:hoverがあると思います。リンクをホバーした際にそのスタイルが適用されます。
このようにaの要素にカーソルが合わさった(特定の状態)時にスタイルが適用されるものが擬似クラスといいます。

どんな擬似クラスがあるのか

• :hover
• :active
• :checked
• :nth-child(n)

など

実際に擬似要素を適用させたのがこちら

See the Pen
Pseudo-classes by taka (@gb-sweep)
on CodePen.

最後に

擬似要素と擬似クラスについて書かせていただきました。
今回紹介させていただいた擬似要素と擬似クラス以外にもたくさんのものがありますのでそれらを活用していけば様々な表現をすることができると思います。
また「CSSだけで描いてみたシリーズ」でもよく使われていますのでもし興味のある方は、これらの擬似要素や擬似クラスを使ってCSSだけで何か描いてみるのも面白いかもしれません。

共に働くWebエンジニアを募集しています!

不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。

事象

新規投稿画面で投稿用のsubmitボタンを用意するときform_with(for)をよく使いますが、
fontawesomeなどでアイコンを付与したい場合はレイアウトがうまく決まりません。
そこで下記のようにstyle: 'display: none'を付与してみたのですが、
そうすると送信ボタンが効かず投稿ができなくなってしまいました。

new.html.haml

= f.submit 'Upload', class: 'submit', style: 'display: none'

因みにf.label下にあるfile_fieldはstyle: 'display: none'を付与しても問題なく動作します。

解決策

下記のようなhamlファイルの場合、style: 'display: none'を付与するのではなく
scss(css)ファイルでsubmitを透明化すればボタンを無力化することなく隠すことができました！

new.html.haml

  (略)
    = form_with model: @モデル名, local: true do |f|
      (略)
      = f.submit 'Upload', class: 'submit'

new.scss

.submit {
  opacity: 0;
}

参考

【CSS】opacityで画像や文字などを透過させる方法

JavascriptのtoUpperCase();

$('#abc').keyup(function(){
this.value = this.value.toUpperCase()
});

『テスト』と打とうとすると。
『Tテスト』になる。

text-transform: uppercase;

解決

google chrome

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

IE , firefox

input[type="number"] {
-moz-appearance:textfield;
}

ついでに右寄せ

input[type="number"]{
text-align:right;
}

100日チャレンジの263日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
263日目は、

おはようございます
263日目
・webサイト模写#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 15, 2020

条件付きのcssクラス

書き方

[class.クラス名]="条件"

使用例

バリデータが成功したか失敗したかによってクラスを変更できる

html

<input formControlName="formOne"
[class.input-invalid]="formOne.invalid"
[class.input-valid]="formOne.valid">
<!-- formOneのバリデータが失敗したらinput-invalidのクラスが追加、
成功したらinput-validのクラスが追加される -->
+
<input formControlName="formTwo"
[class.input-invalid]="formTwo.invalid"
[class.input-valid]="formTwo.valid">
<!-- formTwoのバリデータが失敗したらinput-invalidのクラスが追加、
成功したらinput-validのクラスが追加される -->