CSS: Before and: First-Child Combined

CSS :before and :first-child combined

Try

#navigation_center li:first-child:before {
content: '';
}

Edit: I wanted to expand on this answer with comments made by FelipeAls. The original question used :first which is not a valid CSS selector. Instead, use :first-child. Also the order of the pseudo-selectors is important. The first child selector must come first.

I tend to think of :before as a kind of modifier to a selector. It does not actually select an element only the space just before the selected element.

CSS using first-child and before

:first-child pseudo class selects the element that is the 1st child element of its container. .type-2:first-child selects nothing, because none of the divs with type-2 class is the first child of .section-inner. There is :nth-match(1) selector in CSS Selectors level 4 draft, but no current browser supports it, unfortunately.

You can use a workaround like this:

.section-outer .section-inner > div.type-2:before {
content: "SOME CONTENT";
}

.section-outer .section-inner > div.type-2 ~ div.type-2:before {
content: none;
}

Combining CSS Selectors with :first-child

You're missing a space. You want the span that's the first child, not the div that's the first child.

Finds the first span:

#messages > div :first-child

Finds the first div:

#messages > div:first-child

CSS Pseudo-classes Combine :first-child and :first-letter

Do:

p:first-child:first-letter {
font-size:1.6em;
}

You dont need the space between the two operators.

However this will select all p elements which are the first children. If you only want to do this across every p element on your page regardless of nesting, you will need to add more specificity

:before to all children except :first-child

You can use the :not pseudo-class:

li:not(:first-child):before {
content: "|";
}

ul {  display: flex;  list-style: none;}li:not(:first-child):before {  content: "|";  padding: 5px;}
<ul>  <li>First</li>  <li>Second</li>  <li>Third</li>  <li>Fourth</li>  <li>Fifth</li></ul>

Combine :first-of-type and :after

Explanation why your code fails

What you may not be aware of and commenters as well as the other answer missed to point out, is that :first-of-type works in the context of sibling elements and not in the context of the whole HTML document as you may have thought.

MDN :first-of-type spec

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

Your .feature.feature--featured are all first of its type in their respective sibling context. They're all the first (and only) child within their parent element. Hence they all have the :after pseudo element attached to them. You only see one of these afters because they're all absolutely positioned and at the same position so they're rendered on top of each other. But there are still multitude of them.

So the correct solution is that you need to do :first-of-type on .col-md-4 because they're siblings within their parent element so the pseudo element will only be related to the child feature element of the first one (see @Mr Lister's answer for the code).

is it possible to chain :first-child and :last-child pseudo class selectors?

You can use comma to apply style to multiple selectors.

But you need to remove the whitespace between p and :first-child and use p:first-child, p:last-child

p:first-child, p:last-child {
color: red;
}
<div>
<p>
List of Car Brands
</p>
<ul>
<li>Honda</li>
<li>Tesla</li>
<li>Kia</li>

</ul>
<p>
which one do you prefer?
</p>
</div>

When using :before on an element it becomes the first child of said element?

:before and :after are pseudo elements, that are not actually added to the DOM. They are inserted before the content of the element.

It is also therefore that they don't work on 'empty' (self closing) elements like <input /> or <img/>.

You could however get these pseudo elements to display 'outside' the element they are applied on, by positioning them absolute as demonstrated here: http://jsfiddle.net/vMtct/2/

not:first-child selector

One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported):

div ul:not(:first-child) {
background-color: #900;
}

If you need to support legacy browsers, or if you are hindered by the :not selector's limitation (it only accepts a simple selector as an argument) then you can use another technique:

Define a rule that has greater scope than what you intend and then "revoke" it conditionally, limiting its scope to what you do intend:

div ul {
background-color: #900; /* applies to every ul */
}

div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}

When limiting the scope use the default value for each CSS attribute that you are setting.

Can I combine direct descendant with first-child pseudo-selector?

you can use .container > a:first-of-type

jsfiddle : http://jsfiddle.net/cP7jZ/



Related Topics



Leave a reply



Submit