HTML: The strong and em tags

CSS Child vs Descendant selectors

select all p within a div whether or not it’s an immediate descedent? So if the p is inside another div it will still be selected? Then the child selector:

9 Answers 9

Just think of what the words «child» and «descendant» mean in English:

• My daughter is both my child and my descendant
• My granddaughter is not my child, but she is my descendant.

One important note is that a child selector is going to be faster than descendant selector, which can have a visible affect on pages with 1000’s of DOM elements.

Good answer, but I’d simply add on direct answers to his examples in the question as well — just to make it ridiculously clear.

Yes, you are correct. div p will match the following example, but div > p will not.

The first one is called descendant selector and the second one is called child selector.

Bascailly, «a b» selects all b’s inside a, while «a>b» selects b’s what are only children to the a, it will not select b what is child of b what is child of a.

This example illustrates the difference:

div span div>span 
abcdefghi
 

Background color of abc and def will be green, but ghi will have red background color.

IMPORTANT: If you change order of the rules to:

All letters will have red background, because descendant selector selects child’s too.

Источник

Css selector : parent and child element [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.

Pls somebody should guide me out by briefly explaining what is meant by parent element or child element in css. I had read alot of tutorial on css selector where this terms are always mention, e.g first-child element, parent element, child of thesame parent e.t.c please in a set of html element, which of them is parent or child. And if brother, uncle, nephew or cousin of element also exist pls include them in your answers THANK YOU ALL IN ADVANCE

Where are you stuck? I look at this and think you’re maybe asking for guidance on interpreting the English language, rather than asking a programming question.

2 Answers 2

I find it hard to believe that this is not clear to anyone, but here goes.

Ancestors are elements that are parents or grand-parents (or great-grand-parents and so on). This means they are higher in the HTML structure. Compare it to your family. Your father is your parent, his father is his parent and your grand-parent, and so on. You are the child of your father.

When considering the first element of a set of children, that is called first-child and can be selected as such with CSS3. For instance, in this HTML:

the first list item «First list item» will be in a red color, but the other list items won’t. All the li ‘s are children (or «child elements») of the same parent, which is the ul with ID «parent». The list items are each others’ siblings, they are brothers and sisters if you will.

With the same logic, :last-child selects the last child in the set. So with this CSS

the last item in the list, i.e. «Third list item», will be in a blue color. You can see :first-child and :last-child in action here.

BE WARNED THOUGH!

In some cases, you might need to use :first-of-type instead of :first-child ! You see, first-child selects the first child no matter what type it is, whereas first-of-type, as the name suggests, selects the first element of that type.

The following HTML explains it.

 
I am the first child and also the first of type "span"! I am neither the first child, but second, nor first of type "span" :( I am neither the first child, but third, nor first of type "span" :( 
I might not be the first child, but fourth, but I am the first of my type "blockquote!" Funny enough, I am also the last of my type!
 And I am just sitting here, being the last-child and the last of my type "span" 
 

Источник

CSS selector — element with a given child [duplicate]

Given Jeff’s recent comments on dupes I’m not voting to close as a duplicate, however it’s worth pointing out that there are quite a few other questions here on SO that discuss the much-desired parent-selectors.

Why does Google persistently bring me to SO ‘duplicate’ answers right at the top of the results ranking, rather than the one to which they all refer? search: ‘css select parent with specific child’ yields SO results: 1:4220327 2:14509590 3:11547535; the given existing answer 1014861 is not on the first page.

3 Answers 3

Is it possible to select an element if it contains a specific child element?

The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.

A Note About Specification Changes

This is a disclaimer about the accuracy of this post from this point onward. Parent selectors in CSS have been discussed for many years. As no consensus has been found, changes keep happening. I will attempt to keep this answer up-to-date, however be aware that there may be inaccuracies due to changes in the specifications.

An older «Selectors Level 4 Working Draft» described a feature which was the ability to specify the «subject» of a selector. This feature has been dropped and will not be available for CSS implementations.

The subject was going to be the element in the selector chain that would have styles applied to it.

lorem ipsum dolor sit amet
 
consecteture edipsing elit
 

This selector would style the span element

This selector would style the p element

A more recent «Selectors Level 4 Editor’s Draft» includes «The Relational Pseudo-class: :has() «

:has() would allow an author to select an element based on its contents. My understanding is it was chosen to provide compatibility with jQuery’s custom :has() pseudo-selector*.

In any event, continuing the example from above, to select the p element that contains a span one could use:

_{* This makes me wonder if jQuery had implemented selector subjects whether subjects would have remained in the specification.}

Источник

CSS: child selector

This CSS tutorial explains how to use the CSS child selector with syntax and examples.

Description

The CSS child selector uses the > character to target an element that is a direct child of an element type.

Syntax

The syntax for the :active CSS selector is:

Parameters or Arguments

element1 The first element type to match. element2 The second element type to match that must be a direct child of element1. style_properties The CSS styles to apply to the targeted element2.

Note

• The child selector uses the > combinator to target an element that is a direct child of another element.
• See also the descendant selector.

Browser Compatibility

The CSS child selector has basic support with the following browsers:

• Chrome
• Firefox (Gecko)
• Internet Explorer 7+ (IE 7+)
• Opera
• Safari (WebKit)

Example

We will discuss the child selector below, exploring examples of how to use this selector in CSS.

The CSS would look like this:

The HTML would look like this:

1. TechOnTheNet.com
   • Oracle/PLSQL
   • SQL
   • Excel
2. CheckYourMath.com
3. BigActivities.com

tag will be styled by the child selector (ie: styled with red font). So in the case of the three
tags under the
tag:

tag and therefore are not styled by the child selector. If you wanted them to styled like the other
tags, you might want to try using the descendant selector.

Источник

CSS Child Selector

CSS child Selector is defined as the CSS selector that selects only elements that are direct children which is clearer than the contextual selector. This selector uses greater than the symbol “>” that appears between two different selectors, and it is more specific than the descendant selector, which helps to simplify the CSS Style code. The second selector should be the immediate children of the elements.

Web development, programming languages, Software testing & others

Element1 is the parent, and element2 is the child selector.

How does Child Selector work in CSS?

The working process is very simple. This child selector has two selectors to work with and is separated by the “ > ” symbol. The first selector says that it is a parent element, and the second selector says it is a child element with the style properties.

Here let’s take a sample tree structure for a given HTML document.

For example, if an HTML code is like In the above diagram, every element is either a parent or child, forming a parent-child relationship. The root element here is the body element has two children, the p and ul elements. So here, the p element has only one parent, which may have many children, em and strong, respectively. To select p, we need to give a rule like body > p. Suppose we are in need to select an ‘A ‘element using a selector. We would give a rule like strong > A, which is something like p> a; it is not possible using child selectors.

So in the above sample code, the element is the parent followed by a child element

. So the above statement rule makes any paragraph with the size 12px.

Examples to Implement CSS Child Selector

In this section, we shall explore the child selector briefly with examples. So let’s get started.

Example #1

    div > p  
This paragraph is under the div element
 
This paragraph2 is under the div element.
 
This paragraph is not under the div element. As it is not the child element of div
 
Even This paragraph is under the div element.
 
 
This paragraph is not under the div element.
 
This paragraph is not under the div element.
  

Explanation: Here, we use div > p selector, which says that div is a parent and it selects the child element p, which is the child elements. So over here, the child elements are highlighted in color. The child selector for the above code would look like this.

Example #2

Example #3

Targeting Bold element using child selector

  div.select > b  
Content 1 
Content 2 
Content 3 
 
 Last content. 
  

Explanation: The above code says the child selector selects the div class followed by element. Therefore the first b element content and last b element are stylish.

Example #4

1. The List content given here is blue.

• Over here, the text context is not styled in this list .
  1. As the element is not Child .

For the same html Code above. Let’s see a different selection of the child elements.

body > div > ul Output:

Now you can see the style changes in the second line as I have made a child selector deep down.

Example #5

    body > p > a 
From the World Health Organization
 
This pandemic disease COVID-19 is an infectious disease which makes breathing illness. It gets spreaded when an Infected person sneeze or cough. And all the public health and other social measures have taken risky work in their work-place is the foundation of The recovery time for this dangerous disease is unknown.
 
Further reading more here
  

Example #6

Child selector demo using Span and div element

  span < background-color: #00FFFF; >div > span 
This is the first Span Content under div element. Second Span under the div element.  
 This content of the span is not included under div. 

Conclusion

Therefore, this article explained how to use the CSS Child selector with their syntax and examples. With this child selector, we could build powerful websites that could be challenging and worthful. Also, we had the right overview of what a child selector is and how to use them in real cases.

Recommended Articles

This is a guide to CSS Child Selector. Here we discuss an introduction to CSS Child Selector, its syntax, and how it works with examples. You can also go through our other related articles to learn more –

38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник