Macな暮らし Macと気ままな暮らし、コーヒーとiTunesのカントリーを聞きながら。

Creating selectors(セレクターの作成)
セレクタは、ウェブページのどの要素が、スタイル規則で影響を受けるかを定義します。 スタイルを作成することに関する一般的なインフォメーションに関しては、Creating styles.を見てください。

Using the Selector Builder:(セレクタビルダーを使用します)
CSSEditは、セレクターを作る要素条件を定義するための、革新的な視覚のインターフェースがあります:それはSelector Builderです。
  • ツールバーで「New Selector」ボタンをクリックして、Selector Builderを開いてください。
  • +ボタンを使用して、要素と評価基準を加えてください。 セレクターの意味は、理解できる言語で表示されます。その結果としてセレクタコードを発生させます。(右側にそれぞれの名前を設定記入します)




Writing selectors manually
(手動でセレクタを書く)
The selector represents a number of requirements an element in a web page has to fulfill to be affected by the style. A HTML web page is a tree structure of tag elements, and a CSS selector defines possible paths to such a tag element.
セレクターは、スタイルによって影響されるためにウェブ・ページ中の要素が満たさなければならない多くの必要条件を表わします。HTMLウェブ・ページはタグ要素のツリー構造です。また、CSSセレクターは、そのようなタグ要素への可能なパスを定義します。
If you so desire, you can always write your selectors manually. An example of a selector is the following:
お望みでしたら、手動でいつでもセレクタを書くことができます。 セレクタの例は以下です:
#sidebar ul > li a:hover Style every "a" element (links) that is being hovered by the mouse, if it is a descendant of a "li" element (list items), whose parent is a "ul" element (unordered lists) that is a descendant of an element with the "sidebar" identifier.
#sidebar ul > li a:hover
もしそれが「li」要素(リストアイテム)の子孫であるならば、親が、「sidebar」識別子によって要素の子孫である「ul」要素(整然としていないリスト)であり、マウスが重なったときの「a」要素(リンク)をデザイン。

Simple selectors
(簡単なセレクタ)
A complete selector consists of one or more simple selectors. Such a simple selector represents a type of matching elements in the HTML tree, and must contain one or more of the following:
完全なセレクターは1つ以上の簡単なセレクターから成ります。 そのような簡単なセレクターはHTMLツリーのマッチング要素のタイプを表し、以下のうちの1つ以上を含んでいるにちがいありません:
  • the tag name, or * for any type of elementタグ名、あるいは任意のタイプの要素用*
  • the element identifier, which corresponds to the "id" attribute in HTMLHTMLの「id」属性と一致している要素識別子
  • the class names, which correspond to the "class" attribute in HTMLクラス名、それらは、HTMLの「class」属性に相当する
  • a pseudo-class, which causes the element to be matched only when it's in a certain state: :hover for hovered by the mouse, :active for being clicked, etc.疑似クラスそれが特定の州にある時だけ、要素がマッチされる原因になります:マウスが浮いている状態?
This results in: tag#identifier.class1.class2:pseudoclass
Combining simple selectors(簡単なセレクタの結合(組合わせ?))
Now that you can place restrictions on individual elements, you need a way to define the hierarchy of the element(s) you'd like to style. This is possible by combining simple selectors.
あなたが規制を個々の要素に置くことができる今、スタイルを整えたいと思う要素の階層を定める方法を必要とします。これは単純なセレクターを組み合わせることにより可能です。
  • simpleselector1 simpleselector2
    simpleselector2と一致する要素はsimpleselector1と一致する要素の子孫でなければなりません。
  • simpleselector1 > simpleselector2
    simpleselector2と一致する要素はsimpleselector1と一致する要素の直接の子どもでなければなりません。
  • simpleselector1 ~ simpleselector2
    simpleselector2と一致する要素は、恐らく中間の他の要素と共に、simpleselector1と一致する要素に続かなければなりません。
  • simpleselector1 + simpleselector2
    simpleselector2と一致する要素は、simpleselector1と直接一致する要素に続かなければなりません。
残念なことに、若干のブラウザーは、まだ「+」と「~」の問題を抱えています、そしてそれ>を持つより少ない範囲に。子孫関係は、あらゆる最新のブラウザーによってサポートされます。