CSS属性セレクター

CSSセレクターを使用すると、Web開発者はWebページ上の特定の要素または要素のセットにスタイルを適用できます。

セレクターを使用する場合、特定の属性を持つ要素のみをターゲットにすることを決定できます。そこでCSS属性セレクターが登場します。属性セレクターは、特定の属性を持つ要素にのみ特定のスタイルを適用するのに役立ちます。

このチュートリアルでは、要素のスタイルを設定するときにCSS属性セレクターを使用する方法について説明します。このチュートリアルを読み終えると、属性セレクターを使用して要素のスタイルを設定するエキスパートになります。

HTML属性

HTMLでは、属性は要素の追加の特性またはプロパティを定義するために使用されます。たとえば、height属性は画像の高さを設定し、title属性はWeb要素のタイトルを設定します。

名前/値ペア構造を使用して属性を宣言します。つまり、HTMLファイルでは、属性は次のように表示されます。 name =“ value” 。 HTMLの属性の詳細については、HTML属性のガイドをご覧ください。

CSS属性セレクター

サイトをデザインするときは、要素に特定の属性値があるかどうかに基づいて、要素にスタイルを適用することをお勧めします。これを行うには、CSS属性セレクターを使用します。

属性セレクターを使用するときに実行する2つの手順は次のとおりです。

属性の名前を角かっこで囲みます。
その名前の属性に適用するスタイルを指定します。

CSS属性セレクターの動作例をいくつか見てみましょう。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

CSS[属性]

属性セレクターの最も基本的な形式は次のとおりです。[attribute] 。簡単に言うと、属性の名前を角かっこで囲みます。

title属性を持つすべての要素のフォントサイズを16pxに設定するとします。このコードを使用してこれを行うことができます。

[title] {
	font-size: 16px;
}

CSSルールのコードは、title属性を持つ要素にのみ適用されます。タイトル属性が指定されている要素のフォントサイズは、その属性がどの値を格納しているかに関係なく、上記のルールに従って16pxに変更されます。

次のいずれかまたは両方を指定することで、属性セレクターをより正確にすることができます。

ルールを適用する必要がある特定の要素タイプ
その属性ID値（テキストの場合は「title」、リンクの場合は「href」、任意の要素の場合は「class」など）。

たとえば、すべての段落ヘッダーテキストのサイズを16ピクセルに設定するとします。次のコードを使用してこれを行うことができます。

[title] {
	font-size: 16px;
}

文字p 属性セレクターの開始時に、

にのみフォントスタイルを適用するようにブラウザーに指示します。タグ。 [タイトル] セレクターの一部は、 titleを持つ

タグにのみフォントスタイルを適用するようにブラウザーに指示します。指定された属性。

 
 したがって、このコードを読んだ後、ブラウザはすべての段落（p）の見出しのフォントサイズを16ピクセルに変換します。このコードは、ページ上の他のテキストには影響しません。 
 
  CSS [attribute =“ value”] 
 
  [attribute =“ value”]  属性セレクターを使用すると、コーダーは、属性値がセレクターで指定された値と等しい要素にのみスタイルを適用できます。 
 
 
 CareerKarmaホームページへのすべてのリンクの背景色をオレンジに設定するとします。このスタイルは、 aの背景色を設定する必要があります オレンジへの要素。このアクションは、次のCSSコードを使用して実行できます。 
 
 a[href="careerkarma.com"] {
	background-color: orange;
}
 
 このルールは、href属性がcareerkarma.comと等しいすべてのWebページの要素を選択します 。次に、これらすべての要素の背景色をオレンジに設定します。 
 
  CSS [attribute〜=“ value”] 
 
  [attribute〜=“ value”]  セレクターを使用すると、特定の単語を含む属性値を持つ要素を選択できます。 
 
 
 たとえば、すべての pにスタイルを適用するとします。  blueという単語と一致するタイトルの要素 。このスタイルでは、これらの要素のテキストの色を青に変更する必要があります。 
 
 
 このタスクを実行するには、次のルールを使用できます。 
 
 p[title~="blue"] {
	color: blue;
}
 
 このルールは、「青」という単語を含むタイトルに関連付けられているすべての

タグを検索し、それらの

タグ内のテキストのテキストの色を青に設定します。したがって、

タグのタイトルが blue color の場合、 またはcolorblue  、このスタイルが適用されます。ただし、このルールはではありません  タイトルがblueColorの

タグに適用します  blueという言葉があるからです 属性内に独立して存在するわけではありません。 
 
 
 これは*=セレクターとは異なります 、属性内の特定の単語を検索できるだけでなく、属性内の特定の値も検索できます。 
 
  CSS [attribute | =“ value”] 
 
  [attribute | =“ value”]  セレクターを使用すると、指定した値（「top」など）で始まる属性を持つ要素を選択できます。これには、指定された値で始まり、ハイフンとそれに続く追加のテキスト（たとえば、「top-style」およびその他の「top-」値）を含む属性を持つ要素が含まれます。コードでは、「クラス」という単語の後に縦棒（|）が必要であることに注意してください。 
 
 
 たとえば、すべての に10pxの上部パディングを割り当てたいとします。  topで始まるクラス属性を持つ要素 、他のハイフンで区切られた値が後に続くものを含みます。次のコードを使用してこれを行うことができます。 
 
 div[class|="top"] {
	padding-top: 10px;
}
 
 このルールは、クラス名が topで始まるすべての要素の上部に10pxのパディングを適用します。 、 top-で始まるクラス名の要素を含む 。 
 
 
 指定する値は、単語全体のみ、または単語の後にハイフンを付ける必要があることに注意してください。つまり、上記のスタイルは、クラス名が top styleの要素に適用されます。 およびtop-style 、ただし、クラス名が topstyleの要素には適用されません 。 
 
  CSS [attribute ^ =“ value”] 
 
  [attribute ^ =“ value”]  セレクターは、属性値が特定の値で始まる要素を選択するために使用されます。  [attribute | =“ value”] とは異なり、指定する値は単語全体である必要はありません。 前に説明したセレクター。 
 
 
  paddingBottomで始まるクラス属性を持つすべての要素に10pxの下部パディングを適用するとします。 。このコードを使用してこれを行うことができます。 
 
 div[class^="paddingBottom"] {
	padding-bottom: 10px;
}
 
 ユーザーのウェブブラウザは、クラス名が「paddingBottom」で始まるすべてのタグに定義したpadding-bottomスタイルを適用します。したがって、「paddingBottomStyle」というクラスがある場合、このスタイルが適用されます。このスタイルは、たとえば「paddingBottom」や「paddingBottom-element」と呼ばれるクラスにも適用されます。ただし、「paddingBottom」で始まらない「new-paddingBottom」というクラスには適用されません。 
 
  CSS [attribute $ =“ value”] 
 
 $=演算子 属性値が特定の値で終わるすべての要素を選択するために使用されます。たとえば、href属性値が .appで終わるすべてのハイパーリンクされたテキストのテキストの色を灰色に変更するとします。 。次のコードを使用してこれを行うことができます。 
 
 a[href$=".app"] {
	color: gray;
}
 
 このセレクターは、href値が .appで終わるWebページ上のすべての要素に適用されます。 。 
 
  CSS [attribute * =“ value”] 
 
 *=演算子 属性値に特定の値が含まれているすべての要素を選択できます。 〜=演算子とは異なり 、この属性セレクターは、単一の単語だけでなく、クラス内の特定の値を見つけることができます。 
 
 
 たとえば、クラス属性に allPaddingが含まれているすべての
タグの周りに50pxのパディングを適用するとします。 。次のルールを使用してこれを行うことができます。 
 
 div[class*="allPadding"] {
	padding: 50px;
}
 
 このルールは、 allPaddingという用語を含むクラス属性を持つすべてのHTML要素の周囲に50pxのパディングを設定します 。したがって、クラス名が new allPaddingの要素 、 around allPadding red  、 allPaddingblue  およびallPadding-true すべてこのスタイルの対象になります。 
 
 結論
 
 CSS属性セレクターを使用すると、開発者は属性値に基づいて要素を選択し、それらの要素に特定のスタイルを適用できます。 
 
 
 このチュートリアルでは、例を参照して、属性セレクターの基本と、すべてのタイプのCSS属性セレクターの使用方法について説明しました。これで、プロのようにCSS属性セレクターを使い始める準備ができました。
 
 
   CSSは、Web開発で使用される3つの主要なスキルの1つです。 をダウンロードします  無料のキャリアカルマアプリ   今日は、ウェブ開発者としてのキャリアに参入するために必要なスキルについてアドバイスできる専門のキャリアコーチと話をします。  
 

            

               

            
                
                    
                    CSS垂直整列プロパティ        
                
                
                    CSS入力タイプ     
                    
                
             

             
                 
                    
 
                         
                         
                             
                                 CSS子孫セレクター 
                             
                             
                               CSSの子孫セレクターは、指定された要素の子孫であるすべての要素を照合するために使用されます。 例  次のコードを実行して、CSSDescendentSelectorを実装してみてください。 <!DOCTYPE html>
<html>
   <head>
      <style>
         div p {
            background-color: orange                             
                         
                     
 
                         
                         
                             
                                 CSSのユニバーサルセレクター 
                             
                             
                               CSS *セレクターは、HTMLDOMのすべての要素を選択するために使用されるユニバーサルセレクターです。 構文  CSSユニバーサルセレクターの構文は次のとおりです- * {
   /*declarations*/
}  次の例は、CSSユニバーサルセレクターを示しています- 例 <!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 15px;
   padding: 5px;
   border: 2px sol