Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
「要素名A 要素名B」と記述した子孫セレクタは、要素Aのすべての子孫要素Bにスタイルを適用します。CSS3における子孫セレクタの意味と使い方やサンプルコード、使用例について解説します。 要素名A 要素名B{～} 親要素である要素名Aに含まれる、すべての子孫要素である要素名Bにスタイルを適用します。要素名Aと要素名Bは半角スペースで区切って入力します。ユニバーサルセレクタや、属性セレクタなどと組み合わせて使用できます。 セレクタの使用例 以下の例では、class名がnoteであるspan要素を子孫要素に持つp要素にスタイルを適用し、指定したフォントのスタイルで表示しています。 CSS p span.note{ font-style: italic; } HTML <p> その老人は<span class="note">この山に立ち入ってはならない</span>と言った。 </p> 以下の例で
子孫セレクタは、親要素である要素名 A に含まれる、すべての子孫要素である要素名 B にスタイルを適用します。要素名 A と要素名 B は半角スペースで区切って入力します。 ユニバーサルセレクタや属性セレクタなどと組み合わせて使用することで要素を絞り込むことも可能です。
みなさんCSSセレクタはご存知でしょうか？ 今回はよく見かけるCSSセレクタ5つをご紹介します。 これまで何となく使っていた人やあまり使ってこなかった人は、この機会にしっかりと理解して使いこなせるようになりましょう！ CSSセレクタとはCSSセレクタとは、どの要素にCSSを適用させるかを決定する部分です。 左の例だと、「p」がセレクタになります。 このように直接要素を指定する書き方は、「要素セレクタ」に分類されます。 （ちなみに「color」はプロパティ、「red」はプロパティ値と呼びます） See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen. CSSセレクタの種類今回は、よく見かける以下5つのCSSセレクタをご紹介します。 全称セレクタの指定 子孫セレクタの指定 子セレクタの指定 隣接セレクタの指定 同階層で要素の後
「セレクタ（Selector）」は「スタイルをどこの要素に対して適用するか」を指定するものです。 セレクタがうまく使いこなせないと、思った要素にスタイルを適用できなかったり予想外のところが変更されてしまったりすることがあります。どの要素にスタイルを適用するかをコントロールするためにはセレクタの使い方について理解しておく必要があります。 セレクタにはさまざまな種類があり、指定方法も複雑なものもあります。意図したとおりに要素に対してスタイルを指定するだけでなく、効率よく記述したりメンテナンス性にも優れたコードにするためにもセレクタを使いこなさなくてはなりません。 まずは知っておくべき基本的なセレクタについて見ていきましょう。
この記事では、CSSの「子セレクタ」と「子孫セレクタ」の違いや使い方について、わかりやすく解説します。 子セレクタと子孫セレクタの違いとは？子セレクタと子孫セレクタの違いを見ていきましょう。 子セレクタとはある要素の子要素だけを選択できるのが、子セレクタです。 子セレクタで選択した場合、たとえ同じ要素でも、子要素より下位の要素にCSSは影響しません。 例えば下記の場合、親要素「sampleクラス」の中にはp要素が複数ありますが、子セレクタで選択した場合は緑枠のp要素にのみCSSが適用されます。 反対に、孫要素以深のp要素にスタイリングは影響しません。 このように、子セレクタは要素をピンポイントに狙い撃ちできるため、スタイリングの重複を避けたい大規模なサイトで役に立ちます。 子孫セレクタとは一方、子孫セレクタを使うと、子要素を含めた子孫要素を選択できます。 たとえば下記の場合、sampleク
ネストと親子関係 親要素の直下の要素を「子」。入れ子内のすべての要素を「子孫」と言います。どの要素を「親」とするかで「子」「子孫」は変わります。今回のセレクタを理解する上で重要なことです。 親とその子孫という形で指定するセレクタです。親と子孫は半角スペースで区切ります。子孫はいくつでも指定できます。子孫セレクタは、idセレクタ、classセレクタ、要素セレクタなど他のセレクタと組み合わせて指定します。 下記の場合はclass名「sec」内のすべてのpタグが対象になります。 <div class="sec"> <p>子の段落です</p> <div> <p>子孫の段落です</p> <div> <p>子孫の段落です</p> </div> </div> </div> .sec p{ color: #00ffff; } 親と直下の要素で指定するセレクタです。親と子は「>」で区切ります。子は、いくつで
Python を覚えるために，Python を使って LeetCode に挑戦してみました． そしたらよくわかんないバグが頻発してしまいまして． 変数を宣言するじゃないですか．その宣言した変数を引数に使って関数を走らせてるだけなのに，変数の値がいつのまにか更新されて変化してるんですよ． 不思議ですよね． それで調べたら，参照渡しと値渡しというのがあるみたいです． わかってない私が解説するのもアレなんで，詳しいことは調べてください． とにかく，Python では変数を扱う時にミュータブルオブジェクトだったら参照渡しになってしまって，変数の値が書き換えられてしまうみたいですね． 許せないですね． TypeScriptでは発生しないと思いきや，勝手に参照渡しになることはTypeScriptでもあるみたいですね． 変数の値が意図せず変更されるのはバグの温床なので，こちらが明示的に宣言しない限り絶対
当ブログでは、将来的にReactプログラマーを目指す方に向けて、JavaScriptの基礎を解説します。 今回は、JavaScriptの変数と定数について学習します。 また、スコープについても解説致しますが、詳しくは当ブログの別の記事で説明しています。 以下のリンクを参照してください。 dev-k.hatenablog.com JavaScript 変数 変数の宣言 変数の命名規則 変数の割り当て(代入) 変数の値を変更(再代入) 値の型操作 再宣言 JavaScriptグローバル変数 JavaScriptローカルスコープ 関数スコープ ブロックスコープ 定数 JavaScriptの定数とオブジェクト 最後に JavaScript 変数 変数はJavaScript固有のものではございません。 実際、ほとんどすべてのプログラミング言語には変数の概念があります。 データを非常に簡単に処理および
高木浩光さんのところで以前から盛りあがっている「サニタイズ言うなキャンペーン」に密かに賛同しているのですが、やはり入力段階でHTML実体参照への書換処理をやっているCGIが多く存在していた事が、「サニタイズは入力段でやるべきもの」という誤解を助長してしまったのが背景としてあるのではないかと思っています。 でも個人的には、例えばPerlなら、HTML::Template*1やTemplate-Toolkit*2を使ってテンプレート展開する際に、HTMLやJavaScriptで必要とされる実体参照への変換処理が出来るわけですし、DBIを使ってSQLクエリを発行する場合にも、SQL文字列を直接触るのではなくプレースホルダを利用する方が、パラメータだけ異なるSQLを複数回実行する場合には性能的なメリットもあるわけです。また、最近はClass::DBIやDBIx::ClassのようなORM層を使うこ
単純。「異常な（= 想定していない）値の処理」だから異常系だと考える。以上終了。 つまりだ。たかぎせんせいは「正常系」の処理として、入力された値を「出力するときに相手の都合に合わせて適切なフォーマットで出力しませう」と言っている。これはもちろん正常系の動作で、インターフェイスに合わせて出力するのが当然だ。 対して「サニタイズ脳」の俺みたいな人は、「異常な値に対応するのは異常系である」と認識するわけだ。そこからもうグダグダだけどな。スクリプトの目的が違っちゃってる。 つまり、たとえばインターフェイスから範囲外の値が入力されたとき、「値が大きすぎます」とか「値が小さすぎます」といったエラー処理を行う。これは異常系の処理。この延長線上で、「HTMLのメタキャラクタはアウト」「SQLのメタキャラクタはアウト」 → 「要するに入れちゃダメな値が入ってきたわけだ」 → 「じゃあ異常系で」と考えてしまう
つまり、「サニタイズ」という用語が、各人の都合でどんな意味にも解釈されるという、「汚れた言葉」になっており、専門用語として使い物にならなくなっているのだ。もはや、「サニタイズする」は「セキュリティ対策する」と同義でしかない。そういう言葉には存在価値がない。加えて、特定の意味を指して使っても別の意味で解釈されてしまうのだから、有害である。 続・「サニタイズ言うなキャンペーン」とは こうですか？分かりません！
概要 タイトルの答えはYES. JSを勉強し始めたばかりで、JSにおける値渡し/参照渡し/参照の値渡しの処理の違いがわかりませんでした。 調べていくうちに「え、JSって参照渡ししないんだ！？」となったので、ここに学んだことをまとめようと思います。 追記：いただいたコメントをもとに修正しました。コメントありがとうございます！ 結論 JSでの処理は「プリミティブ値は値渡し」「オブジェクトは参照渡し」と言われていますが、厳密には「参照渡し」はしません。 JSでは「参照の値渡し」(共有渡し、本文中では共有渡しに統一)が行われています。 値渡し、参照渡し、共有渡しとは 値渡し 引数に値を渡す時、変数の値をコピーして渡す処理。 呼び出しもとの変数は変化しません。 参照渡し 引数に値を渡す時、参照(=メモリ番地)で渡す処理。 変更が呼び出しもとに反映されます。 共有渡し 引数に値を渡す時、変数に格納され
変数に代入される値が数値や文字列といったプリミティブ型の値だった場合には「値渡し」と呼ばれるような処理が行われます。また変数に代入される値が配列や関数などのオブジェクト型だった場合は「参照渡し」と呼ばれるような処理が行われます。ここではプリミティブ型とオブジェクト型の値が変数に代入されるときに実際どのように行われるのかについて解説します。
<select> 要素などのフォーム コントロールのスタイル設定は、長年にわたりデベロッパーの最大の問題として報告されており、Google は解決策の開発に取り組んできました。この作業は複雑で、適切に行うまでに長い時間がかかりましたが、この機能のリリースは間近に迫っています。カスタマイズ可能なバージョンの select 要素は、WHATWG で正式にステージ 2 に移行しており、クロスブラウザでの関心が高く、Chrome Canary 130 からプロトタイプをテストできます。 ぜひお試しになり、フィードバックをお寄せください Chrome Canary のインストールがバージョン 130 に更新され、試験運用版のウェブ プラットフォームの機能フラグがオンになっていることを確認します。このフラグを有効にするには、アドレスバーで chrome://flags に移動し、#experiment
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
