css-selectors

CSS cards gets zig zagged on hover and also text is flowing outside the box(overflow)

由 送分小仙女□ 提交于 2020-05-17 07:05:26
问题 i have a page which consists of css cards everything is working fine but the only problem is text which i need to display on css cards is over flowing (but i want it to be displayed with in the card). and one more thing to be fixed is hover effect, when i hover over an element remaining css cards are arranged in zig zag manner. check the following code. <!DOCTYPE html> <html> <head> <title>Easy</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .self{ margin

How can I use :hover with multiple classes

由 折月煮酒 提交于 2020-05-14 19:14:26
问题 I've got a css buttons style and some predefined colour styles. I use colour classes to colour things the same colour and a button style to make the buttons round. How do I add a hover style to my buttons to change the colour to a lighter shade? I thought it would be as simple as .class class2:hover {etc} but it doesn't work for some reason. Here's a fiddle I prepared to demonstrate: http://jsfiddle.net/7n4Wy/ HTML <p class="red button">Test</p> <p class="blue button">Test</p> <p class="red">

get two divs by class name in karma test (Angular 4.0)

由 梦想与她 提交于 2020-05-13 14:27:30
问题 I have something like this in view: <div> <div class="header-title">Example title 1</div> </div> <div> <div class="header-title">Example title 2</div> </div> In my karma test I would like to investigate all divs by class name and check if inner text is correct so I have following code in test: [...] debugTest = fixture.debugElement.query(By.css('.header-title')); elementTest = debugTest.nativeElement; [...] it('should component div has a correct value', () => { fixture.detectChanges(); const

get two divs by class name in karma test (Angular 4.0)

由 被刻印的时光 ゝ 提交于 2020-05-13 14:26:27
问题 I have something like this in view: <div> <div class="header-title">Example title 1</div> </div> <div> <div class="header-title">Example title 2</div> </div> In my karma test I would like to investigate all divs by class name and check if inner text is correct so I have following code in test: [...] debugTest = fixture.debugElement.query(By.css('.header-title')); elementTest = debugTest.nativeElement; [...] it('should component div has a correct value', () => { fixture.detectChanges(); const

How to style bootstrap col-lg-* classes?

由 岁酱吖の 提交于 2020-05-10 04:43:49
问题 I'm beginner in Less. I want to write a string like "Column-div" in any div with col-lg-[anyNumber] or col-md-[anyNumber] class. For example something like this code: .col-lg-*:before { content: "Column-div"; color: #28a4c9; } How can I do this with Less? 回答1: With Less: One of the options would be to basically create a Less loop like in the below code sample. However, the problem is that the number is fixed and so it would (a) statically generate as many classes as the number (which means

How to style bootstrap col-lg-* classes?

由 强颜欢笑 提交于 2020-05-10 04:43:06
问题 I'm beginner in Less. I want to write a string like "Column-div" in any div with col-lg-[anyNumber] or col-md-[anyNumber] class. For example something like this code: .col-lg-*:before { content: "Column-div"; color: #28a4c9; } How can I do this with Less? 回答1: With Less: One of the options would be to basically create a Less loop like in the below code sample. However, the problem is that the number is fixed and so it would (a) statically generate as many classes as the number (which means

Changing CSS pseudo-element styles via JavaScript [duplicate]

由 旧城冷巷雨未停 提交于 2020-05-09 17:27:33
问题 This question already has answers here : Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery (22 answers) How to update placeholder color using Javascript? (3 answers) Closed 2 months ago . Is it possible to change a CSS pseudo-element style via JavaScript? For example, I want to dynamically set the color of the scrollbar like so: document.querySelector("#editor::-webkit-scrollbar-thumb:vertical").style.background = localStorage.getItem("Color"); and I

Select all block level elements with css

由 我只是一个虾纸丫 提交于 2020-05-09 01:43:14
问题 Is there an easy way to select all block level elements with CSS? I want to put am 1.5 em margin between all block level elements in the main content area of my site Right now I have code like: #wrapper .content p, #wrapper .content ul, #wrapper .content div, #wrapper .content ol, #wrapper .content blockquote, #wrapper .content table {margin-top: 1.5em;} #wrapper .content p:first-child, #wrapper .content ul:first-child, #wrapper .content div:first-child, #wrapper .content ol:first-child,

Select all block level elements with css

由 ◇◆丶佛笑我妖孽 提交于 2020-05-09 01:39:32
问题 Is there an easy way to select all block level elements with CSS? I want to put am 1.5 em margin between all block level elements in the main content area of my site Right now I have code like: #wrapper .content p, #wrapper .content ul, #wrapper .content div, #wrapper .content ol, #wrapper .content blockquote, #wrapper .content table {margin-top: 1.5em;} #wrapper .content p:first-child, #wrapper .content ul:first-child, #wrapper .content div:first-child, #wrapper .content ol:first-child,

Targeting first 2 children or last 2 children

由 China☆狼群 提交于 2020-05-07 18:23:45
问题 I know a bunch of the pseudo classes (first-child, last-child, nth-child) but I am having trouble selecting the first 2 children in a list or the last 2, the list is dynamic and changes all the time so i cant target based on counting the li's <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 回答1: For the first two children you can use: ul li:nth-child(-n + 2) { color: orange; } http://jsfiddle.net/nYnSz/1/ For the last two: ul li:nth-last-child(-n + 2) { color: orange; }
订阅 css-selectors