Why is nth-child selector not working in css? [duplicate]


Why is nth-child selector not working in css? [duplicate]



This question already has an answer here:



I am using the nth-child selector to add border-color for different social list-group-item. What am I doing wrong?


nth-child


list-group-item




.list-group-item:nth-child(1) {
border-right: 3px solid yellow;
}

.list-group-item:nth-child(2) {
border-right: 3px solid red;
}

.list-group-item:nth-child(3) {
border-right: 3px solid green;
}

.list-group-item:nth-child(4) {
border-right: 3px solid blue;
}

.list-group-item:nth-child(5) {
border-right: 3px solid lime;
}

.list-group-item:nth-child(6) {
border-right: 3px solid red;
}


<div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6">
<div class="views-field views-field-title">
<span class="field-content list-group-item">Yahoo<a href="/app/wall/content/"></a></span>
</div>
</div>

<div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6">
<div class="views-field views-field-title">
<span class="field-content list-group-item">Googke<a href="/app/wall/content/"></a></span>
</div>
</div>



This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.





Target the parent element and then descend. jsfiddle.net/139gs7tp/1
– Manoj Kumar
Jun 30 at 14:33






Just to be clear, do you want the border on the <a href="/app/wall/content/"></a> OR the parent of that anchor element?, as it stands you have the anchor element here methinks.
– Mark Schultheiss
Jun 30 at 14:41


<a href="/app/wall/content/"></a>




2 Answers
2



nth-child counts in relation to its parent, and .list-group-item is the only child of its parent in your example. You could change this in a variety of ways, including by counting the outermost elements as shown here.


nth-child


.list-group-item




.new-class:nth-child(1) .list-group-item {
border-right: 3px solid yellow;
}

.new-class:nth-child(2) .list-group-item {
border-right: 3px solid red;
}


<div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6 new-class">
<div class="views-field views-field-title">
<span class="field-content list-group-item">Yahoo<a href="/app/wall/content/"></a></span>
</div>
</div>

<div class=" col-xs-12 col-sm-6 col-md-4 col-lg-6 new-class">
<div class="views-field views-field-title">
<span class="field-content list-group-item">Googke<a href="/app/wall/content/"></a></span>
</div>
</div>





I am using drupal.
– Mahmoud Khosravi
Jun 30 at 14:47



The selector works by referring to direct children of an element in terms of order. Above, you're attempting to select children of the span tags declared to use the list-group-item class, which don't exist. Try instead the nth-of-type() selector on the nearest common parent of all the div elements containing the span tags that you wish to style. Something like the following would probably work:
#container span:nth-of-type(1) {
...
}

-

Popular posts from this blog

How to input without newline? (Python)

How to input without newline? (Python) I am trying to create a simple file editor in Python via the console (called PyCons). Here is my current program: def PyCons(f): file = open(f, "r") appe = open(f, "a") print("n=====nPyCons Editor, v1.2nPython 3.6.1n") global i i = 0 for line in file: i += 1 print(" {}| ".format(i) + line, end='') for k in range(10000000000000): print("n {}| ".format(i+1), end='') inp = input("") if inp == "@PyCons.save()": print("n=====") break else: i += 1 appe.write("n" + inp) I used the end method to make sure that the existing code in the file was printed properly in its line format, but the input function does not have an end attribute. So, when I go to enter code in the editor: end input end PyCons("magic.html") ... ===== PyCons Editor, v1.2 Python 3.6.1 1| <p>Hello!...
Read more

C++ thread error: no type named ‘type’ MINGW

C++ thread error: no type named ‘type’ MINGW I'm currently doing a project for my operational systems class and I have to make a program to find prime numbers to run in threads. So I did this: #include <iostream> #include <cmath> #include <thread> #define THREADNUMBER 100 using namespace std; int CONTADOR = 0; int CONTADORTHREADEXECUTADA = 0; int primeRange(int v1, int v2) { int a, limit; bool isprime; for (int i = v1; i <= v2; i++) { if (i % 2 != 0 && i % 3 != 0) { isprime = true; limit = i / 2; if(i == 1) isprime =false; limit = (int)sqrt(i); //General case for(a=2; a <= limit; a++){ if(i % i == 0 && i != 2){ isprime = false; break; } } if (isprime) { CONTADOR++; } } } CONTADORTHREADEXECUTADA++; return 1; } int main(int argc, char *argv[ ] ) { int number1 = atoi(argv[1]); int num...
Read more

Analog for TagView in flutter

Image
Analog for TagView in flutter I want to have UI like this: With native Android it can be done with libraries like https://github.com/whilu/AndroidTagView, how can it be done with flutter? 2 Answers 2 you can make the same UI by combining the Wrap and Chip widget as @wasyl montioned . but this is a full example about what you need Wrap Chip Notes : spacing deleteIcon avatar Chip Shape new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ new Wrap( children: <Widget>[ Chip( label: new Text("Java"), onDeleted: () {}, labelPadding: EdgeInsets.all(2.0), deleteIcon: Icon(Icons.clear), ), Chip( label: new Text("C++"), onDeleted: () {}, labelPadding: EdgeInse...
Read more