css – Page 720 – Tarik Billa

jQuery: Get selected element tag name

September 9, 2022 by Tarik

You can call .prop(“tagName”). Examples: jQuery(“<a>”).prop(“tagName”); //==> “A” jQuery(“<h1>”).prop(“tagName”); //==> “H1” jQuery(“<coolTagName999>”).prop(“tagName”); //==> “COOLTAGNAME999” If writing out .prop(“tagName”) is tedious, you can create a custom function like so: jQuery.fn.tagName = function() { return this.prop(“tagName”); }; Examples: jQuery(“<a>”).tagName(); //==> “A” jQuery(“<h1>”).tagName(); //==> “H1” jQuery(“<coolTagName999>”).tagName(); //==> “COOLTAGNAME999” Note that tag names are, by convention, returned CAPITALIZED. If … Read more

Targeting only Firefox with CSS

September 8, 2022 by Tarik

OK, I’ve found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on. @-moz-document url-prefix() { h1 { color: red; } } <h1>This should be red in FF</h1> It’s based on yet another Mozilla specific CSS extension. There’s a whole list for these CSS extensions … Read more

Resize image proportionally with CSS? [duplicate]

September 8, 2022 by Tarik

To resize the image proportionally using CSS: img.resize { width:540px; /* you can use % */ height: auto; }

Is there a CSS selector for elements containing certain text?

September 8, 2022 by Tarik

If I read the specification correctly, no. You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don’t see anything for matching content within an element, though.

How do you easily horizontally center a using CSS? [duplicate]

September 8, 2022 by Tarik

In the case of a non-fixed width div (i.e. you don’t know how much space the div will occupy). #wrapper { background-color: green; /* for visualization purposes */ text-align: center; } #yourdiv { background-color: red; /* for visualization purposes */ display: inline-block; } <div id=”wrapper”> <div id=”yourdiv”>Your text</div> </div> Keep in mind that the width … Read more

Change navbar color in Twitter Bootstrap

September 8, 2022 by Tarik

tl;dr – TWBSColor – Generate your own Bootstrap navbar Version notes: Online tool: Bootstrap 3.3.2+ / 4.0.0+ This answer: Bootstrap 3.0.x For Bootstrap 5.x, please check documentation Available navbars You’ve got two basic navbars: <!– A light one –> <nav class=”navbar navbar-default” role=”navigation”></nav> <!– A dark one –> <nav class=”navbar navbar-inverse” role=”navigation”></nav> Default color usage … Read more

How to remove the border highlight on an input text element

September 8, 2022 by Tarik

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible. In your case, try: input.middle:focus { outline-width: 0; } … Read more

How can I make Flexbox children 100% height of their parent?

September 8, 2022 by Tarik

Use align-items: stretch Similar to David Storey’s answer, my workaround is: .flex-2 { display: flex; align-items: stretch; } Note that height: 100% should be removed from the child component (see comments). Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

Text-align class for inside a table

September 8, 2022 by Tarik

Bootstrap 3 v3 Text Alignment Docs <p class=”text-left”>Left aligned text.</p> <p class=”text-center”>Center aligned text.</p> <p class=”text-right”>Right aligned text.</p> <p class=”text-justify”>Justified text.</p> <p class=”text-nowrap”>No wrap text.</p> Bootstrap 4 v4 Text Alignment Docs <p class=”text-xs-left”>Left aligned text on all viewport sizes.</p> <p class=”text-xs-center”>Center aligned text on all viewport sizes.</p> <p class=”text-xs-right”>Right aligned text on all viewport sizes.</p> … Read more

How to apply multiple transforms in CSS?

September 8, 2022 by Tarik

You have to put them on one line like this: li:nth-child(2) { transform: rotate(15deg) translate(-20px,0px); } When you have multiple transform directives, only the last one will be applied. It’s like any other CSS rule. Keep in mind multiple transform one line directives are applied from right to left. This: transform: scale(1,1.5) rotate(90deg); and: transform: … Read more