:Last-Child Style Working, :First-Child Style Not Working! Why

:last-child style working, :first-child style not working! Why?

p:first-child does not work because the h1 element is the first child of its corresponding parent element; the p elements are the second, third and fourth child elements. Use p:first-of-type instead to only select the first element of the type p.

Doesn't CSS first-child or last-child work with class wise?

As others have mentioned, :first-child is working as expected, as the first child of the parent.

The :first-child selector is used to select the specified selector, only if it is the first child of its parent.

Source: CSS :first-child Selector

You can reach the first .blue like this:

.red + .blue

or if you want to get all the .blue after .red

.red ~ .blue

You might want to use :first-of-type which selects the first of a type but then those .blue would have to be a different HTML element.

div.red:first-of-type {    color:#F00;}div.red:last-of-type {    color:#00F;}p.blue:first-of-type {    color:#F00;}p.blue:last-of-type {    color:#00F; }

<div>    <div class="red">one</div>    <div class="red">two</div>    <div class="red">three</div>    <p class="blue">one</p>    <p class="blue">two</p>    <p class="blue">three</p></div>

:last-child OR :first-child NOT WORKING if followed by any element

You fail to understand how those selectors are meant to work, and do work.

:first-child and :last-child are conditions which must match on their own. Preceding it with a selector like p or span just further constrains the list of elements already matched by :first-child and :last-child.

So p:first-child actually means Find all elements which are the first child elements of their parent; then from those found, give me only the p elements.

:first-child and :last-child selector not working in form

The definition of :first-child selector as per MDN is below:

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

However, in your case, the .col-sm-1 divs are not the first or last element of their parent. They are 2nd and 4th child of .form-group respectively. This is why the styles are not being applied to .col-sm-1 in your code.

You can use nth-child property to target the .col-sm-1 elements in CSS as below:

#addUserTaskForm .form-group div.col-sm-1{
    width:45%;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(2){
    margin-bottom:5px;
}
#addUserTaskForm .form-group div.col-sm-1:nth-child(4){
    margin-left:35%;
}

JSFiddle: https://jsfiddle.net/hchw6Ljm/2/

React styled components - target first-child and last-child not working

this selectors means when the parent itself is the first child or the last child, in this case, it is both :D this is why it's blue, what you want to do is:

const Text = styled.div`
  color: green;
  font-size: 20px;
  & div:first-child {
    color: red;
  }
  & div:last-child {
    color: blue;
  }
`;

Which means when a child div is the first or the last

CSS last child is not working as first child is

The :last-child CSS pseudo-class represents any element that is the last child element of its parent. This means it's not looking at the class, but at the parent's container, then finding the last child element, then checking if it's got the class.

You could instead use another tbody specifically for your .moohighlight element group and then you can use :first-child and :last-child, since it's the parent and not the subject of the selector:

tbody.moohighlight tr:first-child td {
    background:red;
}
tbody.moohighlight tr:last-child td {
    background:green;
}

<div class="draft_picks_container" id="draft_picks_container">
    <table class="report nocaption commishview" align="center" cellspacing="1">
        <tbody class='moohighlight'>
            <tr style="background-color: rgb(255, 255, 255);" classname="moohighlight" class="moohighlight" id="pick_01_01">
                <td class="pick">1.01</td>
                <td class="franchise fname0006">Chocolate Thunder</td>
                <td class="selection">Bell, Le'Veon PIT RB</td>
                <td class="timestamp">3:13:14 p.m.</td>
            </tr>
            <tr style="background-color: rgb(255, 255, 255); background-position: 0px 0px; color: rgb(38, 62, 104);" classname="moohighlight" class="moohighlight" id="pick_01_02">
                <td class="pick">1.02</td>
                <td class="franchise fname0003">VACANT TEAM - 2nd pick</td>
                <td class="selection">Jeffery, Alshon CHI WR</td>
                <td class="timestamp">3:13:15 p.m.</td>
            </tr>
            <tr style="background-color: rgb(255, 255, 255); background-position: 0px 0px; color: rgb(38, 62, 104);" classname="moohighlight" class="moohighlight" id="pick_01_02">
                <td class="pick">1.02</td>
                <td class="franchise fname0003">VACANT TEAM - 2nd pick</td>
                <td class="selection">Jeffery, Alshon CHI WR</td>
                <td class="timestamp">3:13:15 p.m.</td>
            </tr>
        </tbody>
        <tbody>
            <tr classname="oddtablerow" class="oddtablerow" id="pick_01_03">
            ... Other rows here ...

https://jsfiddle.net/1aawd1vL/59/

:first-child not working unless the parent is div

If you inspect your DOM, it turns out that there are an additional 3 elements being added inside the <body> tag, by the browser. the :first-child operator will only work IF the element being targeted is an <article> AND the first child of its parent. This is not the case, since the <first-child> is actually the <meta> tag. This is why your logic is failing when you remove the div.

To make it work without the <div>, you could update your CSS styles to something like this:

  article:nth-child(4) {
    background-color: red;
  }

  article:nth-child(5) {
    background-color: yellow;
  }

  article:nth-child(6) {
    background-color: blue;
  }

  article:nth-child(7) {
    background-color: green;
  }

I would personally recommend to use a wrapping <div>, since it keeps both your HTML and the corresponding CSS organized. Also, the ordering of the extra tags added by the browser may vary across different browsers, so the above setup is not guaranteed to work across every browser. Using a <div> will guarantee it, since your <article> tags will always be the only children of the wrapping div.

CSS first-child and last-child don't work when used on the same element

I'm wondering why is that and if there is any workaround to that in CSS? It seems like CSS bug to me - first element can be also last element.

It's not a bug. It's how the cascade works: if an element is both the first child and the last child, then if you have :first-child and :last-child in separate rules and they both match the same element, then anything in the later declared or more specific rule will override the other.

You can find an example of this behavior here, with the border-radius shorthand property, and workarounds that include using the component properties instead of the shorthand, as well as specifying a separate rule altogether using one of the following selectors...

I'm looking for something like: "first child is also last child" selector. Does it exist?

Literally, you would chain both pseudo-classes like this, which works fine:

:first-child:last-child

However there exists a special pseudo-class that acts the same way:

:only-child

The main difference (in fact, the only difference) between these two selectors is specificity: the first one is more specific as it contains one additional pseudo-class. There is no difference even in browser support, as :last-child and :only-child are both supported by the exact same versions of each browser.

:last-child not working as expected?

The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.

The other part of the compound selector (which is attached before the :last-child) specifies extra conditions which the last child element must satisfy in-order for it to be selected. In the below snippet, you would see how the selected elements differ depending on the rest of the compound selector.

.parent :last-child{ /* this will select all elements which are last child of .parent */  font-weight: bold;}
.parent div:last-child{ /* this will select the last child of .parent only if it is a div*/  background: crimson;}
.parent div.child-2:last-child{ /* this will select the last child of .parent only if it is a div and has the class child-2*/  color: beige;}

<div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div>Child w/o class</div></div><div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child-2'>Child w/o class</div></div><div class='parent'>  <div class='child'>Child</div>  <div class='child'>Child</div>  <div class='child'>Child</div>  <p>Child w/o class</p></div>

---

Related Topics