Hide specific elements from html using css - html

I've an html file and need to hide some elements from this.
My code is look like this,
<div class="test">
Demo1
</div>
<div class="test">
Demo2
</div>
<div class="test">
Demo3
</div>
<div class="test">
Demo4
</div>
I want to hide the Demo2 and Demo4 links using css. Kindly help me to do this :)

You could use nth-of-type:
The :nth-of-type CSS pseudo-class matches an element that has an+b-1
siblings with the same element name before it in the document tree,
for a given positive or zero value for n, and has a parent element.
.test:nth-of-type(2) a, .test:nth-of-type(4) a{
display:none;
}
<div class="test">
Demo1
</div>
<div class="test">
Demo2
</div>
<div class="test">
Demo3
</div>
<div class="test">
Demo4
</div>
Or
nth-child with the odd switch if you want a repeating pattern of hiding elements
The :nth-child(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings before it in the document tree, for a given positive
or zero value for n, and has a parent element.
.test:nth-child(even) a {
display: none;
}
<div class="test">
Demo1
</div>
<div class="test">
Demo2
</div>
<div class="test">
Demo3
</div>
<div class="test">
Demo4
</div>

Use nth-child to select a div and then change its a to hidden http://jsfiddle.net/8gh7js6a/
.test:nth-child(2) a {
visibility:hidden;
}
.test:nth-child(4) a {
visibility:hidden;
}

Related

How can I target a child class only if the first child has a specific class?

How can I target the ::before in the class .child-ccc only if the first child has the class .hovered?
Here is the HTML output:
<div class="parent">
<div class="child hovered">
<div class="child-aaa"></div>
<div class="child-aaa"></div>
</div>
<div class="child"></div>
<div class="child-c">
<div class="child-ccc">
::before
</div>
</div>
</div>
I have tried .child:first-child.hovered + .child-c .child-ccc:before
The + selector only selects adjacent siblings but child-c isn't. So, you have to use ~.
.parent .child:first-child.hovered~.child-c .child-ccc::before {
content: '';
display: block;
height: 1rem;
background-color: purple;
}
<div class="parent">
<div class="child hovered">
<div class="child-aaa">aaa</div>
<div class="child-aaa">aaa</div>
</div>
<div class="child">bbb</div>
<div class="child-c">
<div class="child-ccc">
ccc
</div>
</div>
</div>
Yes, You can achieve this by using advance CSS selectors. Try this code .child.hovered ~ .child-c > child-ccc::before
This symbol ~ means the sibling of .child.hovered class and > means direct child element.
Selector + is adjacent sibling combinator it means if we write img + p it selects Paragraphs that come immediately after any image and the selector ~ is General sibling combinator it means if we use img ~ p it selects Paragraphs that are siblings of and subsequent to any image.
so in your problem instead of + you should use ~ to achieve your goal like this:
.child.hovered ~ .child-c .child-ccc::before{
...
}

Seperate css for 4th sub element in a row

I want to have a separate style for each 4th element in a row.My html structure is like this
<main>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
</main>
and css is
.container:nth-child(4n) {
left: -2rem !important;
}
So it doesn't reflect on that 4th element.
Any help is highly appreciated. Thanks in advance.
Given the markup you provided, your selector will never match any of your elements as there is only one child .container element within each .a parent element. What you want to select is the .container child element of every 4th .a parent element, like so:
.a:nth-child(4n)>.container{
left:-2rem;
}
Note that the above is identical to:
main>div:nth-child(4n)>.container{
left:-2rem;
}
If you're asking wht the left property isn't being applied to that element then that's because you also need to give it a position. In this case, relative would probably suit your needs best.
.a:nth-child(4n)>.container{
left:-2rem;
position:relative;
}
Alternatively, you could also achieve the above with a single property by using the translatex transform function (although transform does still require some prefixing].
.a:nth-child(4n)>.container{
transform:translatex(-2em);
}
Update Css
.a:nth-child(4n) {
left: -2rem !important;
color:red;
}
Further Link
Since each .container class is surrounded by <div>'s, you cannot select it directly because there is only one child per <div>. If you want to select every element inside the <main>, you can do something like this:
CSS
main .a:nth-child(4n) {
color: red;
}
<main>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
</main>
JSFiddle

Targeting a class by jumping over divs?

In this html:
<div class="main">
<div class="container1">
<div class="div_1">
....
</div>
</div>
<div class="container2">
<div class="div_2">
....
</div>
</div>
</div>
I want to target the div_2 like this
.main .container1 .container2 .div_2 {}
That means the target also has to go through the container1 div to apply the css.
Why? This could be a very useful trick without using any scripts
for example targeting div_2 on a page when container1 exists while on another page does not exist so it does not work. Is this possible?
Use the adjacent sibling selector (+):
.main .container1 + .container2 .div_2 {
background-color: aqua;
}
<div class="main">
<div class="container1">
<div class="div_1">div_1</div>
</div>
<div class="container2">
<div class="div_2">div_2</div>
</div>
</div>
The selector above is saying: Target .div_2, that is a descendant of .container2, which immediately follows its sibling .container1, which is a descendant of .main.
References:
8.3.1 Adjacent sibling combinator (+)
8.3.2 General sibling combinator (~)
CSS Selectors Level 3
.main .container1 .container2 .div_2 {} This will only target .div_2 if both .container2 is nested in .container1.
The closest you can get is a sibling selector.
.container1 ~ .container2 .div_2

CSS selector for something not inside something else

I have some nested elements like this:
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this"></div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this"></div>
</div>
<div class="three select-this"></div>
I want to select all .select-this which are inside .select-inside-this but not those which are wrapped in .not-inside-this. So in the end, i should be able to select only two.select-this from the above code.
The CSS I've tried but did not work:
.select-inside-this :not(.not-inside-this) .select-this {
/* style here /*
}
or:
.select-inside-this *:not(.not-inside-this) .select-this {
/* style here /*
}
Any workaround here?
I don't want to use JavaScript here. I need pure CSS3 solution.
EDIT: I don't want to use direct child (>) selector. As I've asked, I want to select all those element from any level just without the exception wrapper.
:not(.not-inside-this) and *:not(.not-inside-this) with the * are equivalent; in the case of the former, the universal selector is implied. See the spec.
It is currently not possible to construct a CSS selector that matches elements that are not descendants of specific elements for the reasons given in the following questions:
CSS negation pseudo-class :not() for parent/ancestor elements
Is the CSS :not() selector supposed to work with distant descendants?
The selector
.select-inside-this :not(.not-inside-this) .select-this
matches .select-this elements that are descendants of some element that is not .not-inside-this, which in turn is a descendant of .select-inside-this. It does not match .select-this elements that are not descendants of .not-inside-this within .select-inside-this.
This means, first off, that your selector will incorrectly match the following:
<div class="select-inside-this">
<div class="bar">
<div class="not-inside-this">
<div class="select-this"></div>
</div>
</div>
</div>
... because one of the ancestors of .select-this, .bar, is :not(.not-inside-this).
Additionally, this implies at least three levels of nesting (though it could be more). In your example, there are no other elements between .two.select-this and its containing .select-inside-this, so it will never match that element. This is why James Donnelly suggests adding .select-inside-this > .select-this to account for that particular case.
However it is still not possible to write a single complex selector using descendant combinators to match elements without a specific ancestor. The only way is to repeat the child combinator method with as many :not(.not-inside-this) as necessary, but this requires that you account for all possible cases. If you can't do that, then you're out of luck with CSS selectors.
You can use the Child Combinator Selector > to specify direct children:
.select-inside-this :not(.not-inside-this) .select-this,
.select-inside-this > .select-this {
/* style here /*
}
This selects any .select-this element which is not a descendent of any .not-inside-this element and also selects .select-this elements which are direct children of .select-inside-this elements.
body > .select-inside-this :not(.not-inside-this) .select-this,
body > .select-inside-this > .select-this {
color: red;
}
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this">
This should not be selected
</div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this">
This should be selected
</div>
</div>
<div class="three select-this">
This should not be selected
</div>
A little bit late to the party, and it might not match your use case, but this is what I ended up doing:
HTML:
<div class="foo">
<div class="select-inside-this">
<div class="not-inside-this">
<div class="one select-this"></div>
</div>
</div>
</div>
<div class="select-inside-this">
<div class="two select-this"></div>
</div>
<div class="three select-this"></div>
CSS:
.select-inside-this .select-this {
background: blue;
}
.select-inside-this .not-inside-this .select-this {
background: none;
}
The trick is to positively select the negative element and just undo the style.
It'll work for simple use cases, at the very least.
I ended up
styling but hiding the styles by default, and then
revealing them on the nested element only.
Example with image backgrounds:
.box{
height:100px;
background-image: url("img.jpg");
background-repeat: no-repeat;
background-position: top 100px left 0; /*hide by default (here by shifting position)*/
}
.container .box{
background-position: top left; /*reveal in the nested*/
}
Hope you find a way to hide the style you need in place in a similar way.

CSS change NON sibling or child element property on hover

I want to know if there's ability to change CSS of element that is not direct child or sibling of element hovered.
<style>
.one:hover .two {
color:red;
}
</style>
<div>
<div class="one">
111
</div>
</div>
<div class="two">
222
</div>
http://jsfiddle.net/hgd0drky/
Unless you add a parent element to both and make them have Child / Sibling relationship it is not possible purely based on CSS.
You will need javascript, however to demonstrate how easy this can be, I shall make up CSS
http://jsfiddle.net/hgd0drky/1/
<div class="one">
<div >
111
</div>
<div class="two">
222
</div>
</div>
CSS
.one:hover div {color:red;}
.one:hover .two {color:red;}
Which is just an extension of your code.