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
specThe
: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
CSS Table Border Spacing Inside Only
How to Add Image Background to Btn-Default Twitter-Bootstrap Button
How to Configure Sourcemaps for Less Using Grunt
Is There a Business Reason for Striving for Pure CSS Layout
Div with Margin-Left and Width:100% Overflowing on The Right Side
Remove All Borders on a Specific Datatable
How to Add a Svg as Content on: Before Pseudo Element of an Element
How to Add Space Between Bootstrap Card Elements
Angular2 Get Window Width Onresize
Line Two Divs Side by Side with CSS and React
Position: Relative Appearing Over Position:Absolute
Jquery Mobile Set Width of 2 Elements to 80% and 20%
Incorrect Vertical Alignment in Ie8
Gooey CSS Effects with Contrast Parent
Any Programs to Generate CSS Classes from Your HTML