How to select all n element after x element?

css selectors
how do you select all p elements inside a div element
nth-child
nth-of-type
nth-child generator
css element inside element
nth-child css-tricks
css nth-child range

I'm trying to style my all span which is after i element but there is something weird i couldn't achieve.I couldn't styling my span element in order of.

here is my code

.header p span:nth-child(1) {
  color: red;
}

.header p span:nth-child(2) {
  color: blue;
}

.header p span:nth-child(3) {
  color: orange;
}
<div class="header">

  <p>
    <i class="fas fa-phone"></i>
    <span>444</span>
    <span>01</span>
    <span>34</span>
  </p>
</div>

You either want to use nth-of-type or the general sibling combinator

span:nth-of-type(1) {
  color: red;
}

span:nth-of-type(2) {
  color: blue;
}

span:nth-of-type(3) {
  color: orange;
}
<div class="header">

  <p>
    <i class="fas fa-phone"></i>
    <span>444</span>
    <span>01</span>
    <span>34</span>
  </p>
</div>

Useful :nth-child Recipes, li:nth-child(n+6) { color: green; }. If there were more than 10 elements here, it would select all of them beyond 5. Select the Second to Last Element. The ::after selector inserts something after the content of each selected element(s). Use the content property to specify the content to insert. Use the ::before selector to insert something before the content.

:nth-child will count the i-element also so you would have to use indexes 2,3 and 4 for it to work as you want. Or you could use :nth-of-type if you want to only include the span-elements:

.header p span:nth-of-type(1) {
  color: red;
}

.header p span:nth-of-type(2) {
  color: blue;
}

.header p span:nth-of-type(3) {
  color: orange;
}
<div class="header">

  <p>
    <i class="fas fa-phone"></i>
    <span>444</span>
    <span>01</span>
    <span>34</span>
  </p>
</div>

Child combinator, I have x number of <div> and I need to select all after n. <div class=foo>4:00</div​>  'beforeend': just inside the target element, after its last child. 'afterend': after the target element itself. element. The element to be inserted (in the example subTitle variable). So, in fact, you can insert an element at any position you want for a given target. The best part is that this method is supported by all browsers, even Internet

This might work, its the i tag that is the issue here

div > span:nth-child(1) {
  color: red;
}

div > span:nth-child(2) {
  color: blue;
}

div > span:nth-child(3) {
  color: orange;
}
<div class="header">
  <p>
    <i class="fas fa-phone"></i>
    <div>
     <span>444</span>
     <span>01</span>
     <span>34</span>
    </div>
  </p>
</div>

select multiple child in css, We can even select elements that are not really there. The most preferable selector in my opinion, it targets elements with the class specified after the dot. .​selector-class::before { content: "x"; position: absolute; display: block; top: 0; /​uploads/2018/01/plug-n-play-sharepoint-end-user-support.mp4?_=2. Selects every element that is not a <p> element:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child:nth-last-of-type(n) p:nth-last-of-type(2)

CSS Selectors Reference, (m — n + l) = m!/(m — n)! different ways to select all n elements (assuming all m space can be represented by an ordered set of its n coordinates (x,, x,, . . . , x,,). Examples. The following example passes the results of a LINQ query to this method, replacing the contents of an element with the query results. It queries the element that is having its contents replaced.

jquery: select all elements after nth, After highlighting first node, highlight last node and select APPLY to define the element. Use mouse to highlight element(s) or select ALL to choose all elements. Enter a RATIO in the form of m:n indicating that the last division's length is (n/m) that As with defining a boundary node, indicate the x and y coordinates of the  Getting first or last elements of dictionary or map in python is not intuitive but is easy. We need to have two points in mind: * First maps are considered to be structures without order * second it's difficult to point the first and last element of a dictionary In this post: * Getting first keys of a Python 3 dict * Getting first values of a Python 3 dictionary * Getting first items of a

3 levels of CSS-selectors to select all elements, The symbol ( n k ) denotes the number of k-element subsets in an n-element set. which consists of k + 1 elements, then we need to select all k + 1 elements out​  The element inside an element is nothing but for instance a span element inside a div element. Javascript has provided .contains() method to find out whether an element contains another element. This method actually returns true if the condition is satisfied else returns false .

Comments
  • it counts the number of element from the very first element despite of its tag or class you mention.
  • so could i select all span element by order after <i> i think ?
  • The ":nth-child(1)" is the first element, instead of the ":nth-child(0)". So the "i" tag should has the red color, but it is an "i" tag so it stays black. Try "nth-of-type".