top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

Facebook Login
Site Registration

What is Indirect Adjacent combinator in CSS3?

+4 votes
390 views

Please explain with an example.

posted Mar 9, 2015 by Merry

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

+2 votes
 
Best answer

Similar to the CSS Adjacent Sibling Combinator that I wrote about before, the indirect adjacent combinator is pretty nifty and supported by IE7+, FF2+, Opera 9.5+, Safari 3+, and even Konqueror.

It is actually part of the CSS3 spec but it’s surprisingly well supported.

Here’s how to use it and what it does: Using the CSS Indirect Adjacent Combinator

h3 ~ p {
  color: #FFFFFF;
  padding-left: 20px;
  border-left: 3px solid;
}

~

This would affect each <.p>

element that is a sibling of a preceding <.h3> element. This is different from the Adjacent Sibling Combinator (+) in that it affects all following

siblings instead of just the immediate sibling. Let us see an example:

CSS Indirect Adjacent example

Example 1: Adjacent Sibling combinator (h4 + p) test:

Heading 4

Paragraph 1 - This should be bold and red

Paragraph 2 - This should NOT be red

Example 2: Indirect Adjacent Sibling combinator (h4 ~ p) test:

Heading 4

Paragraph 1 - This should be bold and red

Paragraph 2 - This should also be bold and red!!

Here is the CSS for the above example:

.adjacent h4 + p,
.indirect-adjacent h4 ~ p {
    background-color: #CCC; color: #F00;
}

Cool, right? So you see how you can use this instead of the (+) selector to apply styles to the elements you want in basically everything except IE6-! This is a good example of something used for progressive enhancement that should be used to add detail to elements to give your users more information.

answer Mar 10, 2015 by Manikandan J
Similar Questions
+4 votes

My xml link code

the tag is the link.

 <b>link 1</b><l href="#">description</l>

Css code

l{
  color:#222;
  font-size:18;
  font-style: italic;
  display:block;
  transition:all 0.4s;
  -webkit-transition:all 0.5s;
  text-decoration:none;
  width:auto;
}
l:hover{
  cursor:pointer;
  color:blue;
} 

When I specify a width like 200px it works but when I put it to auto it doesn't so can somebody help me with solving this problem?

I have Jquery working on the page so if I need to solve the problem with Jquery that is no problem.

Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...