ただ日々を記すもの

意識高めを装うことができます

【CSS】擬似クラス

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
<a href="http://google.com">google!</a>
<input type="text">

:first-childを使用

ul li:first-child {
  color: red;
}

結果

f:id:RONKUN:20180116231005p:plain

:link, :visited, :hover, :activeを使用

リンクに対して以下の擬似クラスが使用可能。

a:link { color: green; } /* 未訪問のリンク */
a:visited { color: blue; } /* 訪問済みのリンク */
a:hover { color: yellow; } /* マウスオーバーした時 */
a:active { color: orange; } /* リンクが押下された時 */

CSSが適用される優先順優先順位の関係上、順番は↑のようにしないと意図しない挙動になることがある。

:focusを使用

input:focus { background: green; } /* inputにフォーカスが当たった時に背景色を緑色に */

【eslint】Empty components are self-closingエラーの解決法

エラーが出たコード

<div>
  <span className="icon"></span>
</div>

解決方法

エラーの原因は、span タグの中身(content)が空の場合は、
</span> といった閉じタグの指定ではなく、
<span /> のように記述する必要があるからです。

これを self-closing と言います。

<div>
  <span className="icon" />
</div>

【CSS】属性セレクタを使用する

こちらのhtmlを元に属性セレクタを使用していきます。

<body>
  <p>
    <a href="http://google.com">Googleへ</a>
  </p>
  <p>
    <a href="http://yahoo.co.jp" title="yahoo" class="search link">Yahoo!へ</a>
  </p>
</body>

タイトルを指定

a[title] {
  color: red;
}

これでtitle属性をもつaタグにスタイルが適用されます。
今回は、「Yahoo!へ」のみが赤色になります。

属性の値を指定する

a[title="yahoo"] {
  color: red;
}

これで「yahoo」というtitle属性をもつaタグにスタイルが適用されます。
こちらも、「Yahoo!へ」のみが赤色になります。

属性の値を指定する 2

a[class~="search"] {
  color: red;
}

先ほどは、属性の値を完全一致で指定しましたが、
今回は、属性の値に条件に合致するものが含まれていればスタイルが適用されます。
~を指定することで、今回は search というクラス名含む「Yahooへ!」が赤色になります。

【CSS】セレクタの指定

「a, b」で指定

h1, h2 {
  color: red;
}

これは、同じスタイルを複数のセレクタに対して適用します。 h1とh2の文字色が赤色になります。

「a b」で指定

div p {
  color: red;
}

これは、divの下にあるpタグ全てにスタイルを適用します。

「a > b」で指定

div p {
  color: red;
}

スペースと似ているのですが、こちらは divの直下にあるpタグが対象になります。

例えば

<div>
  <p>p1</p>
  <span><p>p2</p></span>
</div>

この場合、

  • 「div p」でスタイル指定 => p1とp2が赤色になります。
  • 「div > p」でスタイル指定 => p1のみが赤色になります。

「a + b」で指定

p + p {
  color: red;
}

これは、pの次にくるp要素を赤色にします。 例えば、

<div>
  <p>p1</p>
  <p>p2</p>
  <div>div1</div>
</div>

この場合は、p2のみが赤色になります。

「a.」で指定

p.result {
  color: red;
}

クラス名がresultのp要素にスタイルが適用されます。

<div>
  <p class="result">p1</p>
  <p>p2</p>
  <div class="result">div1</div>
</div>

この場合は、p1のみ赤色になります。

PSQLException:FATAL: no pg_hba.conf entry...., SSL offの解決方法

herokuのデータベース(PostgreSQL)に接続する際にでた以下のエラーの解決方法。

org.postgresql.util.PSQLException: FATAL: no pg_hba.conf entry for host "【host名】", user "【user名】", database "【database名】", SSL off

解決方法

&ssl=true&sslfactory=org.postgresql.ssl.NonValidatingFactory を追加 (NonValidatingFactoryはサーバ証明の検証を回避するためのオプション)

db.default.url="jdbc:postgresql://<host名>:5432/<database名>?ssl=true&sslfactory=org.postgresql.ssl.NonValidatingFactory"
db.default.user="<user名>"
db.default.password="<password名>"