"css select descendant with class" Code Answer's

descendent selector in css

By Wide-eyed Weevil on Jun 05, 2020

The descendant combinator — typically represented by a single space ( ) 
character — combines two selectors such that elements matched by the second
selector are selected if they have an ancestor 
(parent, parent's parent, parent's parent's parent, etc) 
element matching the first selector. 

example: 
  h1 ul {
    border : 1px solid #f1f1f1;
}
Explanation: This above CSS code snippet will select all the 'ul' (unordered list)
			 tags which are preceeded by an 'h1' (header tag).
/*the best way to understand is to practice by implemetation.
Create a html file with lots of h1 and ul elements to understand by
implementing CSS on them*/

Source: developer.mozilla.org

Add Comment

css select descendant with class

By Obedient Orangutan on Dec 27, 2020

Select an element with the ID "id" and the class "class":
#id.class {
}
example:
<div>
  <strong id="id" class="class">
      Foobar
  </strong>
  <strong class="class">
      Foobar
  </strong>
</div>
=> Will select the first <strong> element

Select all elements with the class "class",
which are decendents of a element with an ID of "id":
#id .class {
}
example:
<div id="id">
	<strong class="class">Foobar</strong>
</div>
=> Will select the <strong> element

Add Comment

css selector for sibling element

By Rohit on Apr 29, 2020

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

Source: developer.mozilla.org

Add Comment

CSS descendant selectors

By ofroog on Nov 27, 2020

/*Descendant Selectors*/
/*Creates matching patterns based on the relationship between nested elements*/

<section>
	<a href="#"></a> -->/*to select "a" tag in CSS use */--> section a{...}   
</section>

/*Examples:*/
.class-selector-name 
.nested-class-name {...}

---tag with class="class-selector-name"
	|
	|--tag with class="nested-class-name"  <-- Selected

main h1 {...}

---main
	|--h1  <-- Selected
---h1 <-- Not selected!!!

Add Comment