program tip

CSS '>'선택기;

radiobox 2020. 10. 4. 10:49
반응형

CSS '>'선택기; 뭐야? [복제]


중복 가능성 :
CSS 규칙에서 ">"는 무엇을 의미합니까?

>CSS 코드에서 사용 된 "보다 큼"( )을 몇 번 보았지만 그 기능을 파악할 수 없습니다. 그것은 무엇을합니까?


> 직계 자식을 선택

예를 들어 다음과 같이 중첩 된 div가있는 경우 :

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

스타일 시트에서 다음과 같이 CSS 규칙을 선언합니다.

.outer > div {
    ...
}

규칙은 "중간"클래스가있는 div에만 적용됩니다. 이러한 div는 클래스가 "외부"인 요소의 직계 하위 항목 (직계 하위)이기 때문입니다 (물론 이러한 규칙을 재정의하는 다른 특정 규칙을 선언하지 않는 한). . 바이올린을 참조하십시오.

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}
<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

사이드 노트

If you, instead, had a space between selectors instead of >, your rules would apply to both of the nested divs. The space is much more commonly used and defines a "descendant selector", which means it looks for any matching element down the tree rather than just immediate children as the > does.

NOTE: The > selector is not supported by IE6. It does work in all other current browsers though, including IE7 and IE8.

If you're looking into less-well-used CSS selectors, you may also want to look at +, ~, and [attr] selectors, all of which can be very useful.

This page has a full list of all available selectors, along with details of their support in various browsers (its mainly IE that has problems), and good examples of their usage.


> selects all direct descendants/children

A space selector will select all deep descendants whereas a greater than > selector will only select all immediate descendants. See fiddle for example.

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */
<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>


It is the CSS child selector. Example:

div > p selects all paragraphs that are direct children of div.

See this


As others have said, it's a direct child, but it's worth noting that this is different to just leaving a space... a space is for any descendant.

<div>
  <span>Some text</span>
</div>

div>span would match this, but it would not match this:

<div>
  <p><span>Some text</span></p>
</div>

To match that, you could do div>p>span or div span.


It is a Child Selector.

It matches when an element is the child of some element. It is made up of two or more selectors separated by ">".

Example(s):

The following rule sets the style of all P elements that are children of BODY:

body > P { line-height: 1.3 }

Example(s):

The following example combines descendant selectors and child selectors:

div ol>li p

It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.


It declares parent reference, look at this page for definition:

http://www.w3.org/TR/CSS2/selector.html#child-selectors


It means parent/child

example:

html>body

that's saying that body is a child of html

Check out: Selectors

참고URL : https://stackoverflow.com/questions/4459821/css-selector-what-is-it

반응형