Css selectors not first

CSS Not:First-Child Property

A Cascading Style Sheet is a code that affects the elements of the HTML code. The combined effect forms the web pages and websites. Any programming language that is used in the back-end preferably uses HTML and CSS to develop and design a front-end for the website. These two are responsible for the static web pages. HTML and CSS along with Javascript mainly play a role in making a dynamic website. In this article, HTML and CSS will be used to see the created webpage.

Sometimes, we come across such a situation where we want to avoid some items or contents between the group of the same items. To specify them manually costs time. So, to avoid time consumption, CSS refers to such effective and efficient properties to make use of them in the code that is quite easily understandable and makes the code manageable. This is done by the CSS “not the first” property.

Not:First-Child Property

This CSS property is used to select all the HTML contents of the same type other than the first one. This property is opposite to the CSS property of “CSS first of type” which is responsible for affecting only the first of most HTML content of the same type. Besides adding a style to all the tags by the inline CSS avoiding the first one, this not:first-child property removed the ambiguity that is created by having the mess of inline CSS that makes the code hard to understand and complicated. We only add a small piece of code in the internal or external CSS by specifying the HTML content where we want to apply this property. Then the first child is automatically affected.

Syntax:
The syntax for the not:first-child property is as follows:

Content_name : not (:first-child) Property: value; \\ Any effect that we want to apply on the HTML items other than the first one.
>

Example 1: Not:First-Child of the Paragraph

To elaborate on the concept of not having a first child, we use the

paragraphs of the HTML content to apply this property. Paragraphs are the HTML contents that are said to be a bunch of text lines. These lines are sequenced and aligned in such a way to form a paragraph. The code contains the body tag. We use the two simple headings and the three paragraphs that contain the simple text of a few words with them. We use a sample text of Lorem Ipsum.

We just need to see the results of the property. To make it quite simple, only this content is declared. Then, close the tags of the body.

The head section only contains the style tag to make it an internal CSS.

Use the paragraph tag

with the not:first-child property to apply all the effects on all the paragraphs except the first one. We add the red font color to the paragraphs. Close all the opened tags.

Save the code with the html extension to the text editor. This extension makes the icon of the file as the default browser. This icon assures that the file is a web page.

Example 2: Not:First-Child on the List

and an ordered list
. The way of declaring is the same for both of them. Inside
and
, all the items are written with
tags.
list is declared. An inline CSS for the margin property is added. This margin property is applied on the second div as well.

A margin property is the CSS value of the distance of the object from the border of the background display. For instance, the margin of the list here is declared to create the list at a specified distance.



Both the lists are declared similarly having three list items. Now, close all the tags and head towards the internal CSS. The heading one is applied by the font-color property. Then, the main part of the code not:first-child property is applied.

tag, as both lists are unordered. But make sure that these lists lay independently or are present inside any other container. As we know that we declared both the lists inside the div, we need to mention the div with the
tag so that the property is applied on all the lists inside the div except the first one.

Div ul: not ( :first-child ) {
Background- color : purple;
Color : white;
Font-weight: bold;
Width : 40 %;
}

are applied with the features of having a background color and the font color. The font weight is set to BOLD. The width of the list is also declared.



Close all the tags. Save the file and implement it on the browser to see the results.



You will see that the first list appears by default without any change applied to it. While the second list is affected by all the values and properties that we applied to the tag of the unordered list in the head section.

tags like we did before but without using the not:first-child property for the lists, what will happen?

We set the font style to italic in all the ul of the div. But the values that are written inside the not-first child selector property are applied on all the lists except the first one.



Apply both the styles on the same body code. Save it and implement it. We see that the italic style is applied on all the list items because we did not mention the not:first-child property with them. While the values that have the selector is applied only on the second list.



Conclusion

The CSS not:first-child gives us knowledge regarding the use of CSS properties on all the elements of HTML rather than the first one. The condition to implement this phenomenon is that all the HTML contents must be of the same type, otherwise this effect will not be applied. From the beginning, we talked about the HTML and CSS basic usage. Then, the CSS not:first-child is explained by giving a syntax that is followed by applying this property. Then, we implemented this concept in two different HTML contents: one is the paragraph and the other one is the div container.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.

Источник

How not to Select the First Child in CSS



In web applications, the selectors are used to style specific HTML elements via CSS. For instance, when you have a lot of content on your page, and it is required to select a few elements, then you should go for CSS selectors. In CSS, a variety of selectors will help you select the specific item from the group of elements.

In this write-up, we will cover how not to select the first child in CSS.

How not to Select the First Child in CSS?

In CSS, to not select the first child, you can use the given selectors:

Method 1: Use :not(:first-child) to not Select First Child

The “:not(:first-child)” selector defines the rule that does not select the first child of the parent tag. This selector will help us to exclude applied CSS styling for the first element.

Let’s take a simple example and learn how we can apply the selector to not select the first child.

Here are three anchor texts on our page having a green color. Let’s exclude the green color only for the first text element:



We have specified the anchor tag “ ” in the “body>” of your HTML file:

Next, utilize the parent tag which is “body” and the child tag which is “a“ along with “:not(:first-child))” selector within the style sheet. Then, add the CSS “color” property with the value “green”; color will be applied on all elements except the first child:

Now, save the added code and open it in the browser simply or using Live Server:



As you can see, we have only applied the color to all elements except first one:



Method 2: Use :not(:nth-of-type(1)) to not Select First Child

The “not(:nth-of-type())” selector lets you choose one or more than one element in the sequence. If only (:nth-of-type(1)) is used, the selector will select the first child; however, when :not is placed before it, the first child will be excluded.

Let’s clear out :not(:nth-of-type(1)) concept using the below example.

Here, we will set the “not(:nth-of-type(1))” selector, where “1” represents that the first child will be excluded. Next, assign the “color” property a value of “orange”:



Method 3: Use :not(:first-of-type) to not Select First Child

The (:first-of-type) selector will match the first occurrence of an element and :not is added behind it as “:not(:first-of-type)” to skip the first occurrence.

In this example, the “:not(:first-of-type)” selector will be applied to exclude the first child of its parent. Then, set the value “blue” for the “color” property:



We have provided you tips on how not to select the first child successfully.

Conclusion

To not select the first child, use “:not(:first-child)”, “:not(:nth-of-type(1))” or “:not(:first-of-type)” selectors. Without using :not, these selectors will only select the first child and skip other ones. However, when :not is placed before these selectors, it will be then bound to skip only the first child of its parent. In this write-up, we have covered three efficient methods for not selecting the first child in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

Not to Select the First Child in CSS



1. Use the :not(selector) Selector Not to Select the First Child in CSS
2. Style the First Child Individually Using the :first-child Selector Not to Select the First Child in CSS

In this article, we will learn how to utilize CSS Selectors not to select the first child.

Use the :not(selector) Selector Not to Select the First Child in CSS

We can use the :not(selector) selector to select every other element that is not the selected element. So, we can use the selector not to select the first child in CSS. We can use :first-child as the selector in the :not(selector) selector. In this way, we can apply styles to all the descendants of an element except the first one. Here, in browsers with CSS Selectors level 3 are supported, we can use the :not selector.

For example, create the body tag in HTML. Then, write three p tags and write some content of your choice between the tags. In CSS, select body p:not(:first-child) and set the color to red .

Here, in the snippet below, we can see that the body contains paragraphs, and all of them have their font color set as red except the first one. Thus, we can select all the children except the first child and apply styles. The :not selector, however, has certain limitations ( such as it can only process simple selectors as argument).

body>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  body> 

body p:not(:first-child)   color: red; > 

Style the First Child Individually Using the :first-child Selector Not to Select the First Child in CSS

We can set specific rules that override the rule previously set using the :first-child selector. By this technique, we can style all the children except the first child. Overriding the styles using the :first-child selector will make the first child appear different from the other children.

For example, use the same HTML structure as in the first method. In CSS, select the p tag and set the color to blue. Next, select the first child as body p:first-child and then set the color to black .

Here, the default style for the paragraphs except the first one is set as color: blue , whereas it is overridden by color: black using the :first-child selector. Thus, we can use the :first-child selector not to select the first child.

p  color:blue; >  body p:first-child   color: black; > 

body>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.p>  body> 

Источник